Resize image proportionally with CSS?

Question

Is there a way to resize (scale down) images proportionally using ONLY CSS?

I'm doing the JavaScript way, but just trying to see if this is possible with CSS.

Answer 1

Control size and maintain proportion :

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}

Answer 2

To resize the image proportionally using CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}

Answer 3

img {
    max-width:100%;
}

div {
    width:100px;
}

with this snippet you can do it in a more efficient way

Answer 4

The css properties max-width and max-height work great, but aren't supported by IE6 and I believe IE7. You would want to use this over height / width so you don't accidentally scale an image up. You would just want to limit the maximum height/width proportionately.

Answer 5

You always need something like this

html
{
    width: 100%;
    height: 100%;
}

at the top of your css file

Answer 6

Try

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);