force css to display image with ratio-aspect

imax is a div element.

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

开发者_JS百科

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?

---

Leave out the height:

#imax img {
  width:222px;
}

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

---

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

---

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.