为什么 srcset 不能在我的 flexbox 上正常工作？答案

【问题标题】：Why doesn't srcset work properly with my flexbox?为什么 srcset 不能在我的 flexbox 上正常工作？
【发布时间】：2021-11-06 22:22:14
【问题描述】：

我试图将 9 个带有一些文本的图像放在一个具有三列的弹性框中。我成功了，它工作正常。现在，我正在尝试根据它们的“可见”宽度更改其中的一些。据我了解，在某些浏览器宽度下，img1B 应更改为 img2B 或 img3B。然而，这不会发生。这是什么原因？这与我的图像分辨率有关吗？

.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.img {
    max-width: 33%;
}

img {
    width: 100%;
}

<body>
    <div class="box">
        <div class="img">
            <img 
            src="../../Image base/1920x1080/img1B.jpg" 
            alt=""
            srcset="
            ../../Image base/1920x1080/img1B.jpg 400w,
            ../../Image base/1920x1080/img2B.jpg 600w,
            ../../Image base/1920x1080/img3B.jpg 800w
            "
            >
            <p> Lorem ipsum dolor...
            </p>
        </div>
    </div>
</body>

【问题讨论】：

标签： html css srcset

【解决方案1】：

您还必须设置属性sizes 来定义一组媒体条件：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes

img 元素的内置媒体查询功能是这样工作的：

srcset 设置不同大小的不同图片
sizes 设置条件，让浏览器决定显示srcset 中定义的图像

【讨论】：