Last Updated: February 25, 2016

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.

#css

Written by Blaise Liu

Say Thanks

Respond

Related protips

Fully custom select box, simple css only

570.8K

Change the Bootstrap NavBar Breakpoint

500.1K

Creating full width (100% ) container inside fixed width container.

465.2K

1 Response

Add your response

robsonsobral

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 ·