We generally have to show images of some specific dimensions in web pages but the images are not always available with those specific dimension. But if we specify height and width property of the image tag to control the dimension, then the image may get distorted, i.e, it may get squeezed(if larger sized image than the particular size or dimension) or may get expanded(if smaller sized image than the particular size or dimension). To fix this issue,we can set the following CSS property to the image tag to ensure that the image of doesn’t get distorted (maintains the aspect ratio).

.thumbNail-100{max-height: 100px; max-width: 100px;}
.thumbNail-200{max-height: 200px; max-width: 200px;}

FYI: here max-height and max-width property does not force the image to be of any particular size rather it does not allow the images to  go beyond that dimension.

The above class “thumbNail-100” will force the image to stay within size of 100 x 100. If the image size is 200 x 100, then it will be adjusted to show as 100 x 50. It will maintain the aspect ratio of the original image, i.e. 2:1.