Zach 查看 流体响应式图像的一些基本 HTML+CSS 用法。 我想说，大多数都是您期望的，但在 srcset 出现时情况会变得很奇怪。
我仔细研究了一下，除了 Zach 提到的奇怪之处，还想补充一点。 让我们从这里开始
<img src="./img.jpg" alt="" />如果没有其他 CSS 参与，这将以图像的“固有大小”呈现。 假设原始图像宽度为 400px，则它将呈现为 400px 宽度。
我们应该在图像上添加 width 和 height 属性，因为这允许浏览器在它们下载之前为它们腾出空间 (即使它们是流体的，这非常酷)。 所以
<img src="./img.jpg" alt="" width="400" height="300" />那里也没有什么特别奇怪的。 即使我们在 CSS 中添加 max-width: 100%，它也会按照我们想要的方式执行：保留空间，以流体方式运行，并且不会比它应该的更大。
但让我们先不要使用 max-width: 100%。 如果我们只使用 srcset 并设置多个源。
<img src="./img.jpg" alt=""
srcset="./img-200.jpg 200w, ./img-400.jpg 400w" />BAM，我们吹掉了它的宽度。
它不会以 200px 或 400px 呈现——实际上它将以 100vw 呈现，信不信由你。 我认为这是因为这是默认的 sizes 值。 我通常认为 sizes 属性不是关于任何与实际布局相关的信息，而只是关于浏览器选择源的信息。 但这里并非如此。 它确实会影响布局（在我测试的所有浏览器中）。 以下就是证明
看看下面那个小东西，我唯一改变的就是 sizes。
无论如何，这不是 Zach 关注的重点，但它很相似。 让我们放回有责任感的内容，添加 width 和 height 属性。
<img src="./img.jpg" alt="" width="200" height="137"
srcset="./img-200.jpg 200w, ./img-400.jpg 200w" />不再出现爆炸（无论是否使用 sizes），但现在我们遇到了一个新的奇怪问题。 这基本上就像说 max-width: 200px。 即使我们有比 200px 更宽的源，我们也已将宽度限制为 200px。 Zach 的说法是
使用
max-width: 100%将图像限制在容器内，但在将它与srcset一起使用时要小心——在使用[width]时，它可能会比你想要的限制更小！ 将其与width: auto配对以解决此问题。
Zach 的最终代码段如下，我认为这解决了所有奇怪之处
img {
max-width: 100%;
}
img[width] {
width: auto; /* Defer to max-width */
}
img[width][height] {
height: auto; /* Preserve aspect ratio */
}
/* Let SVG scale without boundaries */
img[src$=".svg"] {
width: 100%;
height: auto;
max-width: none;
}