How Can I Maintain Image Aspect Ratio During Resizing with CSS?

Preserving Aspect Ratio During Image Resizing

Image aspect ratio is crucial for maintaining the original proportions of an image when resizing. This issue becomes apparent when images have predefined width and height attributes and additional CSS rules are applied.

For example, in the code provided below, the image "big_image.jpg" has its height and width explicitly defined as 600 and 900 pixels, respectively:

<img src="big_image.jpg" width="900" height="600" alt="" />

To force image resizing while maintaining the aspect ratio, CSS rules can be employed. In this case, the following CSS rule can be used:

img {
    max-width: 500px;
}

However, this CSS rule may not shrink the image to its proper size. To address this, additional CSS properties should be used:

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

With these CSS properties, the image "big_image.jpg" will resize while preserving its aspect ratio. This is illustrated with the following HTML and CSS code:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.sstatic.net/aEEkn.png">

The above is the detailed content of How Can I Maintain Image Aspect Ratio During Resizing with CSS?. For more information, please follow other related articles on the PHP Chinese website!