picture
element, source
children elements, srcset, sizes, media, type
attributes
將一幅大尺寸的圖轉成數個降低尺寸的圖,由瀏覽器依照不同大小的 viewport 決定取用更適合的尺寸的圖。
<source srcset="" sizes="">
方式處理,與 <img>
雷同。
picture
裡面必須有一個 img
元素,否則不會顯示,而且在所有 source
之後, picture
結尾標籤之前。
圖例:展示一幅很大尺寸的圖有指定 srcset
類似方式使用 media
也可以。
<picture>
<source media="(max-width:320px)" srcset="./images/flower2_300.jpg">
<source media="(max-width:640px)" srcset="./images/flower2_604.jpg">
<source media="(max-width:880px)" srcset="./images/flower2_839.jpg">
<source media="(max-width:1200px)" srcset="./images/flower2_1100.jpg">
<img src="./images/flower2.jpg" alt="the rose">
</picture>