force css to display image with ratio-aspect

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?

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.