响应式图像-为什么此场景中的图像不响应？

问题描述

感谢您的帮助！

我设置了2张图片- 800X1000

图片1：在设置为的容器中设置：宽度：100％。

我还将图像设置为- 宽度：100％

图片2：无需容器即可设置，无需任何特殊订单。

我在容器上设置了边框- 当调整屏幕大小时，大约为800像素标记- 容器开始收缩，没有采用我设定的100％宽度。（因此，图像也会缩小）。

一旦我删除了2号图像，它就会按预期-占据整个屏幕的100％宽度。

那是为什么？为什么一旦我有2张图像，第二张图像基本上会导致图像缩小？

这是我的代码（没什么特别的，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。

解决方法

您的第二张图像没有样式，您基本上只是将图像放在主体容器中，而从未为其指定宽度。

使用您提供的代码，第二个图像将保留其默认宽度，而.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%;
}

第二张图片将恢复为默认大小。

另外，为了进一步回答您的问题，由于您的第一张图片包含在具有5像素绿色边框的div中，因此浏览器上的默认box-sizing不会将边框计算为声明的宽度100的一部分％，这将使您的图片容器偏移5像素。

要使浏览器计算5px边框作为100％容器宽度的一部分，您可以对文档应用通用box-sizing: border-box。

我已将其包含在上面的代码段中以供参考。

html responsive responsive-design responsive-images