How Can I Force Resize Images in CSS While Preserving Aspect Ratio?

Preserving Aspect Ratio while Force-Resizing Images

When dealing with images in web development, it's crucial to maintain the original aspect ratio to prevent distortion. By default, scaling images using CSS properties like width and height may alter their aspect ratios.

Addressing the Issue

To address this issue, CSS rules can be employed to force resizing while preserving the aspect ratio. The following code snippet achieves this functionality:

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

The display: block; property ensures that the image behaves like a block element, taking up the full width available. max-width: 500px; sets a maximum width for the image, ensuring it does not exceed 500 pixels.

Crucially, width: auto; and height: auto; allow the image to adjust its size automatically while maintaining its aspect ratio. This means that the image will resize to fit the specified maximum width without distorting its height or causing any stretching or squishing.

Example Usage

Consider the following code:

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/aEEkn.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="How Can I Force Resize Images in CSS While Preserving Aspect Ratio?" >

Applying the CSS rules to this image will force it to resize within the specified maximum width, while preserving its aspect ratio.

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