时间戳

首页 > 解决方案 > 响应式图像 - 为什么此场景中的图像没有响应式？

html - 响应式图像 - 为什么此场景中的图像没有响应式？

问题描述

感谢您的帮助！

我设置了 2 个图像 - 800X1000

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

我还设置的图像 - 宽度：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。

标签： htmlcssresponsive-designresponsiveresponsive-images

解决方案

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

使用您提供的代码，第二个图像将保持其默认宽度，而其中的图像.alon div将采用其父容器的宽度。在这种情况下， 中的图像.alon div占用浏览器的 100% 宽度，而其中的图像占用 100% 的宽度.alon div。

我在下面包含了一个示例，该示例也将 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 中，浏览器上的默认框大小不会将您的边框计算为声明的 100% 宽度的一部分，这反过来, 将使您的图像容器偏移 5px。

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

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

推荐阅读