使用圖片元素的響應影象

碼

<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