Html 根据屏幕调整图像
我制作了一个图像库，由两行组成，每行有树图像。我已经使我的网站响应，但由于某些原因，图像不会根据屏幕大小/调整。我已经附上了这张照片，可以看到，这些图像与屏幕不匹配Html 根据屏幕调整图像,html,css,image,rows,Html,Css,Image,Rows,我制作了一个图像库，由两行组成，每行有树图像。我已经使我的网站响应，但由于某些原因，图像不会根据屏幕大小/调整。我已经附上了这张照片，可以看到，这些图像与屏幕不匹配 .image3{ 高度：300px； 宽度：370px； 边框：5px实心； 颜色：灰色； } 他们为什么要这么做 你可以用 max-width: 100%; /* or 33% or whatever you need */ 让它在屏幕宽度变小时收缩，但现在它将始终是您指定的大小 另外，“响应性”主要指针对不同的屏幕宽度有
.image3{
高度：300px；
宽度：370px；
边框：5px实心；
颜色：灰色；
}
max-width: 100%; /* or 33% or whatever you need */
另外，“响应性”主要指针对不同的屏幕宽度有不同的布局，从而优化移动和桌面的布局。有三个图像挨在一起似乎反应不太快。相反，我会减少每行中的图像数量 像这样：
.image3{
高度：300px；
宽度：370px；
边框样式：实心；
边框宽度：5px；
颜色：灰色；
}图像不会调整大小，因为您给了它们一个绝对宽度。如果给元素一个100%的
最大宽度最大高度.image3{
最大高度：100%；
最大宽度：100%；
边框样式：实心；
边框宽度：5px；
颜色：灰色；
}似乎您正在使用
px- 相对于容器：百分比aje%
- 相对于容器字体大小：em
- 相对于根元素字体大小：rem
- 相对于视口大小：vw和vh（相当于 视口（测量）
class:wrapperhtml，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.image3{
显示：块；
最大高度：100%；
最大宽度：100%；
宽度：100%；
边框样式：实心；
边框宽度：5px；
颜色：灰色；
}
.行{
宽度：100%；
}
.包装纸{
宽度：33.33%；
浮动：左；
}使用此代码。这里我用的是引导。。。 复制整个代码。。并另存为page.html 然后检查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
</div>
<div class="col-lg-4 col-sm-4 col-md-4 col-xs-4">
<img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
如果您希望图像具有响应性，您需要做两件主要事情：
在你的例子中，你有3张图像，所以将100%分为3，大约33%，所以给图像33%的大小（如果容器没有框大小：border box；），它们会很好地调整。这不是期望的结果。如何使用
最大宽度