HTML img srcset 未按预期运行？答案

【问题标题】：HTML img srcset not behaving as intended?HTML img srcset 未按预期运行？
【发布时间】：2018-05-24 23:16:33
【问题描述】：

我正在尝试加载响应式图像，并且在最新版本的 Firefox 中似乎可以正常工作。但是，我的图像在 Safari 和 Chrome 中没有按预期加载。

<img 
  src="/images/pages/arrivals/02_exterior_1000.jpg" 
  srcset="/images/pages/arrivals/02_exterior_400.jpg 400w, 
          /images/pages/arrivals/02_exterior_600.jpg 600w, 
          /images/pages/arrivals/02_exterior_800.jpg 800w, 
          /images/pages/arrivals/02_exterior_1000.jpg 1000w"
  alt="Blank" 
/>

目标是让这些图像中的每一个都加载到各自的屏幕上。 02_exterior_400.jpg 应该在小于 400 像素的屏幕上加载。 02_exterior_600.jpg 在小于 600 像素的屏幕上加载，等等。这些图像中的每一个都应该占用 100vw。

在 Chrome 上（见下文）我的页面是 386 像素，但它正在加载 800 像素的图像，我希望它加载 400 像素：

Safari 上同样的问题。我做错了什么？

编辑：在决定加载哪个图像时，Chrome/Safari 似乎将我的屏幕宽度加倍。例如：如果我的屏幕是 350 像素，浏览器会将其解释为 700 像素，然后加载 02_exterior_800.jpg。

任何帮助表示赞赏，谢谢

【问题讨论】：

标签： html image responsive-design srcset

【解决方案1】：

您可能缺少“尺寸”属性。此外，将常规的“src”属性放在“srcset”属性之后。如果不支持第一个 srcset 或找不到图像，则将其用作后备。

<img srcset="/images/pages/arrivals/02_exterior_400.jpg 400w,
             /images/pages/arrivals/02_exterior_600.jpg 600w,
             /images/pages/arrivals/02_exterior_800.jpg 800w,
             /images/pages/arrivals/02_exterior_1000.jpg 1000w"
     sizes="(max-width: 400px) 400px,
            (max-width: 600px) 600px,
            (max-width: 800px) 800px,
            1000px"
     src="/images/pages/arrivals/02_exterior_1000.jpg" alt="A Sense of Arrival">

【讨论】：

感谢您的回复。不幸的是，似乎没有工作。据我了解，sizes 是一个可选属性，当留空时，浏览器会隐含地认为100vw。
sizes 定义了一组媒体条件（例如屏幕宽度），并指示当某些媒体条件为真时最好选择哪种图像尺寸...没有 size 属性浏览器不知道要显示的图像：mozilla responsive images