Last Updated: February 25, 2016
·
680
· blaiseliu

Use CSS to make an image responsive to the screen width

What we need is a media query:

@media screen and (max-width: 500px) {
    .hide-in-small-screen {            
        display: none;
    }
    . reduce-in-small-screen{
        max-height: 60%;
    }
}

Then apply the class to the DOM element we want to control.

1 Response
Add your response

But both images will still be downloaded. You don't get nothing using this. There's only disadvantages.

In this code, is better to use just one image and set its dimensions using media queries.

If the image isn't background and it need art direction, the picture element will save us, but it isn't 100% ready yet, despite the picturefill.js being available. If you can go on bleeding edge tech, go with picturefill.js and picture element. If you can't, don't make the users download two files to just use the smaller of them.

over 1 year ago ·