使用图片元素的响应图像

码

<picture>
  <source media="(min-width: 600px)" srcset="large_image.jpg">
  <source media="(min-width: 450px)" srcset="small_image.jpg">
  <img src="default_image.jpg" style="width:auto;">
</picture>

用法

要在不同的屏幕宽度下显示不同的图像，必须在图片标记中包含使用源标记的所有图像，如上例所示。

结果

• 在屏幕宽度> 600px 的屏幕上，它显示了 large_image.jpg
• 在屏幕宽度> 450px 的屏幕上，它显示 small_image.jpg
• 在具有其他屏幕宽度的屏幕上，它显示 default_image.jpg