具有后备功能的响应式<picture>图像

Question

我尝试使用<picture>元素提供3个不同的图片：1个用于移动设备，1个用于min-width: 768px，1个用于IE作为后备广告。

<picture>
  <source class="article-bg-image" media="(min-width: 768px)" srcset="tablet-desktop.jpg" alt="Text" title="Text">
  <img class="img-responsive" srcset="mobile.jpg" alt="Text" title="Text">
</picture>

这在移动设备和桌面设备上的效果与预期一致，但我不希望将移动设备用作IE的后备设备。我如何专门为移动设备提供图像？我尝试了第二个source但没有media属性，但它没有被使用。

提前致谢！

Answer 1

你可以试试这种方式

＆＃13;

＆＃13;

  <img src="mobile.jpg" class="img-responsive" srcset="large.png 1280w,medium.png 640w, small.png 320w" sizes="100%" alt="Text" title="Text">
 

＆＃13;

＆＃13;

＆＃13;