Spread the love

HTML <picture> Tag

In this blog about HTML <picture> Tag, we will see how that happens HTML <picture> Tag is used in responsive web designing where we need to load different images based on their viewport, height, width, orientation, and pixel density.

The <picture> Tag consists of one or more <source> elements and an <img> Tag. Using which we can show images. Media query inside the source tag will be for him to do.

Depending on the viewport, matching images will be loaded from different <source> Tags, and if no source contains a matching image, the default image in the <img> Tag will be displayed on the browser.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML picture Tag
    </title>


</head>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
} 
 
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML picture tag Example</h1>    
 
<picture>  
    <source srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-baby-boy.jpg" media="(min-width: 1050px)">
    <source srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-girl.jpg" media="(min-width: 750px)">  
    <source srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-girl.jpg" media="(min-width: 450px)">  
    <img srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-baby-boy.jpg" alt="default image" style="width: auto;">  
</picture>  
 
</body>
</html>

Output:-


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *