CSS Force Image Resize and Keep Aspect Ratio

While designing websites, developers are always searching for ways to adjust the web page so that the images or other components display perfectly in every screen size. More specifically, the Cascading Style Sheet or CSS helps to make a proper look for the web pages. It provides styling properties and properties that help maintain the layout, size, and aspect ratio of the images.

This write-up will demonstrate three following three methods:

• Method 1: Force Image Resize and Keep Aspect Ratio Using “width” and “height” CSS Properties
• Method 2: Force Image Resize and Keep Aspect Ratio Using “object-fit” CSS Property
• Method 3: Force Image Resize and Keep Aspect Ratio Using “display: flex” CSS Property

Prerequisite: Add Image to HTML File

Before, moving ahead, specify the “<img>” element in the HTML file for adding an image to the document:

Method 1: Force Image Resize and Keep Aspect Ratio Using “width” and “height” CSS Properties

The “width” and “height” properties can be utilized to adjust the image. Moreover, the width property with a specified value and the height property with auto or vice versa could help in resizing the image and keeping the aspect ratio.

Style “img” Element

The “<img>” element is specified with the following properties:

Here:

• “width” determines the image’s width.
• “height” sets the image height.

Output

Let’s now set the width as auto and see the results.

In CSS, set the “height” property with some value and “width” as “auto”:

The given output signifies that the image has been resized and the aspect ratio is also maintained:

Method 2: Force Image Resize and Keep Aspect Ratio Using “object-fit” CSS Property

The CSS “object-fit” property with the value “contain” can be utilized to adjust the image without affecting its aspect ratio.

To do so, apply the following CSS properties to the added HTML “<img>” Element:

The “object-fit” property with the value “contain” specifies how an image or video should be resized to fit within its container.

Output

Method 3: Force Image Resize and Keep Aspect Ratio Using “display: flex” CSS Property

The “display” property with the value “flex” places the items of the flexible container in a row (by default).

Example

Firstly, add a “<div>” with the class “main”. Then:

• Add two images by using the “<img>” tags.
• The “src” and the “alt” attributes are mentioned for the image URL and the alternate text of the image if in any case image could not display:

Style “main” Class

The “.main” is used to access the “<div>” element with the specified class name. The following properties are applied to it:

Here:

• “display” property with the value “flex” places the images in a row.
• “width” property determines the flexible container’s width.

 

Style “img” Element of “main” Class

The “img” element holds the “50%” width and the “height” is set as “auto” and adjusts the height of the container automatically.

Output

You have learned how to force images to resize and keep the aspect ratio in CSS.

Conclusion

There are alternate ways to resize the image and keep its aspect ratio in CSS, like setting a specific value of the “width” property and the “auto” value for the “height” property of the image or vice versa. The CSS “object-fit” property with the value “contain” is the best method. Moreover, the “display: flex” property can also be used to maintain the aspect ratio of the image. This write-up has explained the methods to demonstrate how to resize an image and maintain its aspect ratio in CSS.