force css to display image with ratio-aspect

Question

imax is a div element.

#imax {
width:222px;
height:222px;
}
#imax img {
width:222px;
height:auto;
}

if either way I tried auto on width or height, the images with different orientation will result in distort in either scale. How could I fix to display with ratio-aspect?

Answer 1

Cannot be done with CSS only.

You could use Javascript to do this: Get either height or width of the full size image, then calculate the correct smaller size.

Answer 2

Leave out the height:

#imax img {
  width:222px;
}

And the browser will take care of the aspect ratio calculation.

Answer 3

The image is distorted since you put restrictions on it's parent. If you specify just one of the size attributes, the other should scale according to proportions - unless it's limited/affected by its container. Might work differently if you used max-height/width on the container