响应图像 srcset 忽略 div 宽度以在 Firefox 中显示比所需更大的图像

Posted 2023-03-06

【中文标题】响应图像 srcset 忽略 div 宽度以在 Firefox 中显示比所需更大的图像

【英文标题】：Responsive image scrset ignoring div width to show a larger image than necessary in Firefox

【发布时间】：2017-11-25 21:23:31

【问题描述】：

刚开始使用 img srcset。我很难理解在 div 指定的特定宽度内显示图像的行为。

尽管 css 宽度设置为 1664 像素并且有 1680 像素的图像可用，但它使用的是 3200 像素版本。屏幕分辨率设置为 1920 x 1200。代码似乎忽略了 css 并使用浏览器宽度（1920px）。

以下代码中是否有任何明显错误可能导致这种情况，或者这是否是 srcset 的工作方式？

<div style="width:1664px;">
    <a href="http://www.test.com">
        <img src="/images/1680-example-image.jpg"
             srcset="/images/0960-example-image.jpg 960w, 
             /images/1280-example-image.jpg 1280w, 
             /images/1680-example-image.jpg 1680w, 
             /images/3200-example-image.jpg 3200w" 
             sizes="100vw">
    </a>
</div>

【参考方案1】：

这是正确的（虽然有点烦人）的行为。 w 值总是在谈论窗口大小，而不是图像容器的大小。

【讨论】：

谢谢。更多信息：cloudfour.com/thinks/…