picture tag

Posted on Edited on In Views: Disqus:

 

截取來自w3schools範例

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

    <picture>
        <source media="(min-width: 650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg">
        <source media="(min-width: 465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
        <img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    </picture>

    <p>
        Resize the browser to see different versions of the picture loading at different viewport sizes.
        The browser looks for the first source element where the media query matches the user's current viewport width,
        and fetches the image specified in the srcset attribute.
    </p>

    <p>
        The img element is required as the last child tag of the picture declaration block.
        The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
    </p>

    <p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>

</body>
</html>

說明：

1 、picture tag 可以做到 responsive design。

2、picture tag 無法支援IE11版本以下的瀏覽器，

3、當瀏覽器寬度大於650px時，則顯示pink_flower；當瀏覽器寬度大於465px時，則顯示white_flower，

當瀏覽器寬度都不符合source tag 所指定條件時，則全交由 img tag 顯示。

4、指定多個source tag 時，當滿足第一個source tag條件時，剩下的source tag條件將會被忽略。

5、img tag is required, and must to put the last on all source tags.

 

參考資料：

HTML <picture> Tag

HTML <source> Tag