Last Updated: February 25, 2016
· blaiseliu
0 zdfer mextupleu3bexrr3szkfrkbdj3chrcr3youxf8zsotmf0kvtoxe7u7xapdqodnqquhhlpg

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.

Say Thanks

1 Response
Add your response

0 nfyu8txkcy7l9htqq8v08golvgypn tq96e18gxteze wf5n43u8aci7u1puckp4vxyt753o6cjr

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 ·