Use CSS to resize images while maintaining aspect ratio

Current Location：Home > Learning > WEB FRONT-END > CSS >

Vue React JavaScript Angular CSS HTML

Use CSS to resize images while maintaining aspect ratio

Author：JIYIK Last Updated：2025/04/19 Views：

This simple guide is all about setting up images in your website so that their aspect ratio is not disturbed based on the image size and the container it needs to fit in. First, we will look at the CSS styles to understand this.

Apply styles to web pages using CSS

CSS stands for Cascading Style Sheets. Cascading means that styles applied to any parent element are automatically inherited by any child elements unless you specify different styles for the child elements.

There are several ways to incorporate CSS into your website:

Inline CSS: Using style attribute with any HTML element and applying any style property specifically to that element is called inline CSS.
Internal Style Sheets: Use internal CSS if you want to apply the style to only one page of your website. So, include the style attributes for that page in a tag <head>inside the <head> section of your HTML page <style>.
External Stylesheets: All website pages can have styles applied to them using external CSS. So, you create a stylesheet containing various selector types and style attributes and include it in all the pages of your website.

There are many image-related properties in CSS. These properties adjust the size, color, position, and more of the images on your website.

When we place an image in some container on our website, like any div element, its size depends on the size of the image. This sometimes creates problems because some images are larger and some are smaller; to set such images, we set their aspect ratio.

Setting image aspect ratio using CSS

The ratio between an element's width and height is called its aspect ratio. The universal video format is 4:3, and two common video aspect ratios are 16:9 and 3:2 (common to HDTV and digital TV).

The syntax for setting the aspect ratio is as follows:

aspect-ratio: auto || <ratio>;

Either set it to the default value, which is automatic, or give some aspect ratio. Here are the possible values and what they mean:

Aspect Ratio	illustrate
aspect-ratio: auto;	This is the default value.
aspect-ratio: 1 / 1;	Width and height are in equal proportion.
aspect-ratio: 2 / 1;	The width of the image is twice its height.
aspect-ratio: 1 / 2;	The width of an image is half its height.
aspect-ratio: 16 / 9;	This is a commonly used ratio for videos.
aspect-ratio: 0.5;	The ratio can also be specified using a floating point value.
aspect-ratio: inherit;	It inherits the aspect ratio of its parent element.
aspect-ratio: initial;	This is equal to the default value, auto.
aspect-ratio:unset;	It removes all aspect ratios from the element.

Consider an example where we will place an image and set its aspect ratio:

<html>
<head>
   <style>
       .images{
            aspect-ratio: auto;
            width: 400px;
        }
    </style>
</head>
<body>
    <h2>Aspect Ratio auto </h2>
    <img src="/img/jiyik/logo.png" class = "images"/>

</body>
</html>

In this code snippet, we have placed an image and assigned it a class selector images. This class is a CSS class in which we set the aspect ratio to auto and assigned its width to 400px.

For the auto value, the height will automatically adjust based on the size of the image.

Now we'll change the aspect ratio like this:

.images{
    aspect-ratio: 2 / 1;
    width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/jiyik/logo.png" class = "images"/>

The output will be something like this:

In this output screen, you can see that the image's height is half its width. Now we'll use a ratio of 1/2 so that the height is twice the width.

.images{
    aspect-ratio: 1 / 2;
    width: 400px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/jiyik/logo.png" class = "images"/>

Resize images while maintaining the same aspect ratio using CSS

We can use CSS to resize images while maintaining the aspect ratio. For example, consider the following image with dimensions of 428x428 pixels:

Actual size image

We can use CSS to resize the image above while maintaining its aspect ratio. Consider the following example:

.images {
            display: block;
            max-width:250px;
            max-height:90px;
}
<h2>Aspect Ratio auto </h2>
<img src="/img/jiyik/logo.png" class = "images"/>

We use the CSS class selector image in this code snippet. This class resizes the image to 250x90px without changing its aspect ratio.

In this way, we can set the aspect ratio according to the needs and requirements of our web pages.

We can also change the image with the same aspect ratio. This is mainly done to make the website responsive to all display sizes.

Previous：Rotating text using CSS

Next：CSS wrap text around image

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >