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

Preserving Image Proportions While Sizing Using CSS: A Comprehensive Guide

In the realm of web development, it's often necessary to resize images to fit various display requirements. However, it's crucial to maintain the image's aspect ratio to avoid undesirable stretching or distortion. To achieve this, CSS offers an elegant solution.

Object-Fit: The Key to Maintaining Proportions

The object-fit property controls how the content of a replaced element, such as an img or video, should be resized to fit its container. By utilizing this property, we can specify how an image should be sized while preserving its original aspect ratio.

Preserving Proportions While Filling an Element

To fill an element with an image while maintaining proportions, use the "cover" value for the object-fit property. This tells the browser to resize the image to completely fill the element, while cropping any excess content from the edges to ensure the aspect ratio is maintained.

For example:

.cover {
  object-fit: cover;
  width: 150px;
  height: 100px;
}

<img  src="/static/imghwm/default1.png" data-src="https://i.sstatic.net/2OrtT.jpg" class="lazy" alt="How Can I Maintain Image Aspect Ratio While Resizing with CSS?" >

Code Demonstration

In the example above, the cover class uses the object-fit: cover property to ensure the image scales to fill the element with a width of 150px and a height of 100px. Despite the image's original dimensions (242px width, 363px height), it is scaled and cropped to maintain its aspect ratio within the specified element size.

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