Responsive image on different dimensions

wild-web-dev's photo
wild-web-dev

Published on Jul 19, 2021

How to display different size images on different dimensions.

Use picture tag in html file and in the tag mention different widths and image sources.

<picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>

You can have as many source as you want. If the 's media condition evaluates to false, the browser skips it and evaluates the next element inside .

You can use picturefill for cross browser compatibility.

 
Share this