响应式图像 - 为什么这种情况下的图像没有响应式？

Question

感谢您的帮助！

我设置了 2 张图片 - 800X1000

图片 1： 设置在一个容器中，该容器设置为： 宽度：100%。

我还设置的图像 - 宽度：100%

图片 2： 无容器套装，无特殊顺序。

我为我的容器设置了一个边框 - 当调整屏幕大小时，大约 800px 标记 - 容器开始缩小，没有达到我设置的 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。

Answer 1

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

使用您提供的代码，第二个图像将保持其默认宽度，而.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 应用于您的文档。

我已将其包含在上面的 sn-p 中以供参考。