html - Cannot get srcset to work cross device

Question

I've got a main header image:

<img class="hero" src="/assets/images/Food-Spread-500x167.jpg" alt="banner image" sizes="(min-width: 992px) 80vw, 100vw"
srcset="/assets/images/Food-Spread-500x167.jpg 500w,
        /assets/images/Food-Spread-768x256.jpg 768w,
        /assets/images/Food-Spread-992x331.jpg 992w,
        /assets/images/Food-Spread-1200x400.jpg 1200w">

The difficulty I'm having is twofold:

1. Which size should you set as the src fallback? Largest or smallest? IE doesn't support srcset at all, so you'd be left with a tiny image as your header!! Safari (mac) struggles with it too...

2. Because there no way to say 'n'vw 2x how do you get this to work on iphone? (As it's retina it obviously thinks it's twice as big as it is and pulls a much larger image than required). Is there something that can be done about this??

   Thanks in advance...

Answer 1

1. 你可以选择任何你喜欢的！您必须在最适合旧版桌面浏览器和最适合旧版移动浏览器之间进行权衡。

2. 您的问题是 Safari 支持srcset描述x符，但不支持wor sizes。发生的情况是该sizes属性被忽略，然后它要么选择第一个候选者srcset作为“1x”，要么忽略所有候选者srcset（取决于 Safari 的版本）并src改为使用。因此，您可能会将 500x167 图像渲染为 500 CSS px 宽，这会溢出（320 CSS px 宽）视口。

   你可以做两件事来解决这个问题（如果你愿意，你可以同时做）：

   • 使用图片填充，它将添加对w和sizes做内在尺寸的支持。
   • 使用 CSS 设置宽度：.hero { width:100% } @media (min-width: 992px) { .hero { width:80% } }