css - IE 10 和 11 的 HTML5 srcset 回退

Question

我真的想让我的页脚响应不同的设备，所以我使用了 cloudinary 的生成器。这是 HTML5

<picture>
<img
sizes="(max-width: 1920px) 100vw, 1920px"
srcset="
footer_rainbow_fjrr5j_c_scale,w_190.png 190w,
footer_rainbow_fjrr5j_c_scale,w_780.png 780w,
footer_rainbow_fjrr5j_c_scale,w_1190.png 1190w,
footer_rainbow_fjrr5j_c_scale,w_1920.png 1920w"
src="footer_rainbow_fjrr5j_c_scale,w_1920.png"
alt="">
</picture>

但是根据 caniuse.com，它不支持 IE 10 或 11。

什么是最好的回退？到目前为止，我能想到的就是使用带有不同断点的 css 的媒体查询。有没有更好的办法？我也尝试过 css cover, width; 100% 和包含，但两者都不完美。

Answer 1

您已经有了后备方案。您设置它的方式应该在 IE 10 和 11 中工作...两者都将忽略 sizes 和 srcset 属性，但默认使用 src 属性。

我使用我的图像测试了相同的结构，它在 IE 10 和 11 上都显示了默认的后备图像:

<img
sizes="(max-width: 1920px) 100vw, 1920px"
srcset="
http://www.studioadam.com/codepen/waterfall-wide-1100.jpg  1100w,
         http://www.studioadam.com/codepen/waterfall-wide-550.jpg  550w"
src="http://www.studioadam.com/codepen/waterfall-wide-1100.jpg"
alt="">

或者(或者如果你想要艺术直接图像)，你也可以在 picture 元素中使用 source 元素: http://codepen.io/studioadam/pen/pNVNNj?editors=1100