HTML img srcset表现不正常？

Question

我正在尝试加载响应式图像，而事情似乎在最新版本的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应在小于400px的屏幕上加载。 02_exterior_600.jpg在小于600像素的屏幕上加载，等等。每张图片都应占用100vw。

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

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

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

任何帮助表示赞赏， 感谢

Answer 1

你可能会错过＆＃34;尺寸＆＃34;属性。另外，把常规＆＃34; src＆＃34;在＆＃34; srcset＆＃34;之后属性属性。如果不支持第一个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">