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

【问题标题】：Responsive <picture> images with fallback具有后备功能的响应式 <picture> 图像
【发布时间】：2017-11-30 16:24:17
【问题描述】：

我正在尝试使用 <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 的后备方案。我将如何专门为移动设备提供图像？我尝试了第二个没有media 属性的source，但没有使用。

提前致谢！

【问题讨论】：

标签： html css responsive-design responsive-images

【解决方案1】：

你可以试试这个方法

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

【讨论】：