响应式图像 srcset 未按预期运行答案

【问题标题】：Responsive images srcset not behaving as expected响应式图像 srcset 未按预期运行
【发布时间】：2017-07-17 04:39:30
【问题描述】：

我正在尝试实现具有以下宽松要求的full screen responsive image solution

0-600px > 显示小图
601-900px > 显示中等图片
901-2000px > 显示大图

经过一番挖掘，我决定使用以下尺寸：
iPhone 6 > 414x736
ipad > 768x1024

我为每个屏幕尺寸创建了单独的图像（艺术指导目的）并使用了以下 srcset 代码

<img    src="/assets/images/414X736/artGallery.jpg"
        srcset="/assets/images/414X736/artGallery.jpg 414w, 
                /assets/images/768x1024/artGallery.jpg 768w,
                /assets/images/1920x1080/artGallery.jpg 1920w">

图像具有以下 CSS （因此其行为类似于 background:cover）

img {
    display:block;
    height:100vh;
    width:100vw;
    object-fit:cover; 
}

我把我的桌面显示器调小了，然后调整到全屏，图像被替换在正确的位置

但是，在我的手机和平板电脑上，它始终显示 1920 年的图像

理想情况下，我想在将浏览器窗口从小到大以及从大到小缩放时替换图像

我对 srcset 的理解是，一旦加载了最大的图片，就不会加载较小的图片了

感谢您的帮助和建议

【问题讨论】：

在视网膜显示器上，由于设备像素比，它总是加载最大尺寸的图像
并非总是如此，它只是使用像素比计算像素，所以如果你得到 x2 像素比，1000px 将是屏幕上的 500px 宽度

标签： image responsive-images srcset

【解决方案1】：

如果你想做某种艺术指导，你需要使用<picture>而不是srcset-w。

顺便说一句，您的代码缺少sizes 属性，如果您将srcset 属性与w 描述符一起使用，则这是必需的。

【讨论】：

如果您没有指定它不是强制性的，浏览器将采用 size="100vw"。
HTML5 specification中写着“如果srcset属性有任何使用宽度描述符的图像候选字符串，sizes属性也必须存在”。