How Can I Resize Images While Maintaining Aspect Ratio Using CSS?

Force Image Resize while Maintaining Aspect Ratio

When working with images, it's often necessary to resize images to specific dimensions. However, preserving the aspect ratio ensures that images don't appear distorted or stretched.

Initial Attempt:

Initially, specified dimensions and custom CSS rules were used to resize the image, but the aspect ratio was not maintained:

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

img {
  max-width: 500px;
}

Solution:

To force image resize while preserving the aspect ratio, the following CSS properties can be used:

• display: block;: Ensures the image can flow within the page content.
• max-width:230px;: Sets the maximum width of the image.
• max-height:95px;: Sets the maximum height of the image.
• width: auto;: Allows the image to automatically fill the available space within the max-width and max-height constraints.
• height: auto;: Automatically adjusts the height based on the image's inherent aspect ratio.

Result:

Applying these CSS rules to the image:

<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">

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

Results in an image that is resized within the specified maximum dimensions while maintaining its original aspect ratio.

The above is the detailed content of How Can I Resize Images While Maintaining Aspect Ratio Using CSS?. For more information, please follow other related articles on the PHP Chinese website!