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

Try this:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}

Answer 2

image_tag("/icons/icon.gif", height: '32', width: '32') I need to set height: '50px', width: '50px' to image tag and this code works from first try note I tried all the above code but no luck so this one works and here is my code from my _nav.html.erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

Answer 3

We can resize image using CSS in the browser using media queries and the principle of responsive design.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}

Answer 4

<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 5

Use this easy scaling technique

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}

Answer 6

To scale an image by keeping its aspect ratio

Try this,

img {
  max-width:100%;
  height:auto;
}