Keep aspect ratio with image width in css

Question

Hi All,

Is there a way to fix the aspect ratio of images given a smaller width using css? Maybe by using jQuery / javascript?

Thanks!

Answer 1

With plain CSS, you could set only one dimension of the images, either width or height and set the other as auto, e.g.:

.thumb { 
  width:200px;
  height:auto;
}

The images will have a fixed 200px width, and the height will depend on the aspect ratio.

Answer 2

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?