Question

So I want to scale an image down with css into the size of a container, while maintaining its aspect ratio. It seems easy enough to achieve this when specifying the minimum height OR width, but not both. Any ideas?

Answer 1

Find out if the height is less or the width is less; whichever dimension is less, set that property of the img but not the other. Assuming you aren’t setting the size of the img in CSS, this should maintain the aspect ratio while making the image as large as possible within the constraints of the container. This code assumes your container is a div.

var height = $('#divImg').Height();
var width = $('#divImg').Width();

if (height > width)
{
    $('#divImg img').Width(width);
}
else
{
    $('#divImg img').Height(height);
}

EDIT:

If you aren’t using jQuery, you can use the following CSS trick to maintain aspect ratio. Change 100px to the size of your container:

#divImg img {
    height: 100px;
    width: auto;
}  
#divImg img {
    height: auto;
    width: 100px;
}

Borrowed from CSS styling image height and width while maintaining aspect ratio.