不同屏幕的不同图片

Question

我遇到了问题！我在我的html中使用了<picture>，我现在看到它在Safari和IE中不受支持。我有一个用于浏览器max-width: 660px的图片和一个用于浏览器min-width: 660px的新图片。有没有人对如何做到这一点有一些建议？

Answer 1

＆＃13;

＆＃13;

img {
  max-width: 100%;
}

＆＃13;

<picture>
  <!-- Use CSS media queries in media attribute (this will show for screens less than 661px) -->
  <source srcset="http://lorempixel.com/660/200"  media="(max-width: 660px)">

  <!-- Default image (this will show for screens greater than 660px) -->
  <source srcset="http://lorempixel.com/1200/400">

  <!-- Use this image if <picture> element isn't supported -->
  <img src="http://lorempixel.com/1200/400" />
</picture>

＆＃13;

＆＃13;

＆＃13;