Image Responsive

Image Responsive

Usually we do responsive in CSS media, but do you think is there any possibilities to do responsive in html code. The answer is YES.

The below code is for image responsive from html side.

<picture>
    <source media="(max-width: 799px)" srcset="img/mobile.jpg">
    <source media="(min-width: 800px)" srcset="img/desktop.png">
    <img src="img/desktop.png" alt="Cashews">
</picture>

For below of width : 800px the mobile image will be show, and above the desktop image will be show. Yeah it’s cool and simple.

<img srcset="img/desktop.png 480w, img/desktop.png 800w" sizes="(max-width: 600px) 480px, 800px" src="img/desktop.png" alt="Cashews">

The same image with the 2 different sizes depends upon the screen width. If the screen width was below 600px the image size will be 480, and it was above 600px means the image size will be 800px.

 Source File : image responsive

You May Also Like

SASS

CSS Grid Example

CSS Grid Properties

Angular Components

Leave a Reply

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