响应图像-为什么此场景中的图像不响应？
感谢您的帮助！
我设置了- 800X1000的2个图像
图1:在设置为: width: 100%的容器中设置。
我还将图像设置为- width: 100%
图2:没有容器的设置，没有任何特殊的顺序。
我为我的容器设置了一个边框-当调整屏幕大小时，大约800px的标记-容器开始缩小，没有我设置的100%宽度。(因此，图像也会缩小)。
一旦我删除了2号图片，它就像预期的那样--占据了屏幕的100%宽度。
为什么会这样呢？为什么一旦我有两个图像在里面，第二个图像基本上会导致缩小？
这是我的代码(没什么特别的，2行CSS代码)
.alon {
width: 100%;
border: 5px solid green;
}
.alon img {
width: 100%;
}<div class="alon">
<img src="images/donald.jpg" alt="">
</div>
<img src="images/donald.jpg">上面的HTML。
回答 1
Stack Overflow用户
发布于 2020-11-03 07:07:01
您的第二个图像没有样式，您基本上只是将一个图像放入body容器中，并且从未指定它的宽度。
使用您提供的代码，第二个图像将保持其默认宽度，而.alon div中的图像将采用其父容器的宽度。在本例中，.alon div中的图像占用浏览器的100%宽度，而其中的图像占用.alon div的100%宽度。
我已经包含了下面的一个例子，它将100%的宽度应用于第二个图像。
body img {
width: 100%;
}
* {
box-sizing: border-box;
}
.alon {
width: 100%;
border: 5px solid green;
padding: 0px;
}
.alon img {
width: 100%;
padding: 0px;
}
body img {
width: 100%;
}<div class="alon">
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg" alt="">
</div>
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg">
运行代码后，你会注意到第二张图片和你的第一张图片一样，占据了浏览器100%的宽度。
如果删除以下CSS：
body img {
width: 100%;
}第二个图像将恢复到其默认大小。
此外，为了进一步回答您的问题，由于您的第一张图片被封装在一个具有5px绿色边框的div中，因此浏览器上的默认box-sizing不会将您的边框计算为声明的宽度100%的一部分，这反过来将使您的图像容器偏移5px。
要让浏览器将5px边框作为容器宽度100%的一部分进行计算，您可以对文档应用通用box-sizing: border-box。
我已经在上面的代码片段中包含了这段代码以供参考。
https://stackoverflow.com/questions/64657280
复制相似问题
腾讯云开发者
