Resize image proportionally with CSS? [duplicate]

Answer 1

To scale an image by keeping its aspect ratio

Try this,

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

Answer 2

img{
    max-width:100%;
    object-fit: scale-down;
}

works for me. It scales down larger images to fit in the box, but leaves smaller images their original size.

Answer 3

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 4

Revisited in 2015:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

I've revisited it as all common browsers now have working auto suggested by Cherif above, so that works even better as you don't need to know if image is wider than taller.

older version: If you are limited by box of 120x100 for example you can do

<img src="http://image.url" height="100" style="max-width: 120px">

Answer 5

Control size and maintain proportion :

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

Answer 6

Try this:

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

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