Question

我有一个主标题图片：

<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">

我遇到的困难是双重的：

您应该将哪个尺寸设置为src后备广告？最大还是最小？ IE根本不支持srcset，所以你留下一个小图像作为你的标题!! Safari（mac）也在努力解决这个问题......
因为没有办法说'n'vw 2x你怎么能在iphone上工作？（就像它一样视网膜它显然认为它是它的两倍大并且拉了一个比需要的图像大得多）。有什么可以做的吗??

提前致谢...

Answer 1

你可以挑选自己喜欢的任何一个！您必须在最适合旧版桌面浏览器的内容与最适合旧版移动浏览器的内容之间进行权衡。
您的问题是Safari支持srcset个x描述符，但不支持w或sizes。发生的情况是sizes属性被忽略，然后它会选择srcset中的第一个候选者作为＆＃34; 1x＆＃34;或者忽略srcset中的所有候选人（取决于Safari的版本）并使用src代替。因此，您可能会将500x167图像渲染为500 CSS px宽，这会溢出（320 CSS px wide）视口。

你可以做两件事来解决这个问题（如果你愿意，你可以做两件事）：
- 使用图片填充，它会添加对w和sizes的支持，并执行内在大小调整。
- 使用CSS设置宽度：.hero { width:100% } @media (min-width: 992px) { .hero { width:80% } }

无法让srcset跨设备

1 个答案: