Resize image proportionally with CSS? [duplicate]

Answer 1

Notice that width:50% will resize it to 50% of the available space for the image, while max-width:50% will resize the image to 50% of its natural size. This is very important to take into account when using this rules for mobile web design, so for mobile web design max-width should always be used.

UPDATE: This was probably an old Firefox bug, that seems to have been fixed by now.

Answer 2

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 3

<img style="width: 50%;" src="..." />

worked just fine for me ... Or am I missing something?

Edit: But see Shawn's caveat about accidentally upsizing.

Answer 4

You always need something like this

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

at the top of your css file

Answer 5

To resize the image proportionally using CSS:

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

Answer 6

If it's a background image, use background-size:contain.

Example css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}