CSS aspect-ratio Property

Last Updated : 01 Apr, 2024

CSS aspect ratio is a powerful tool for web developers, enabling the creation of boxes with preferred aspect ratios. This property adjusts the sizes of boxes based on their aspect ratio values.

Try It:

Auto

1:1 (Square)

16:9 (Widescreen)

4:3 (Standard)

3:2

8:5

Currently Active Property:

aspect-ratio: auto;

The syntax for the CSS aspect-ratio property is simple. The ‘auto’ attribute indicates no preferred value is set for the aspect ratio. The ‘ width/height ’ attribute sets the aspect ratio according to their width and height ratio values. The ‘ initial ’ attribute is the default value for the aspect-ratio property, and the ‘ inherit ’ attribute means the aspect-ratio value is inherited from its parent elements.

Syntax:

aspect-ratio: auto | width/height | initial | inherit;

Property Values:

auto: It means no preferred value is set for the aspect ratio.
width/height: It sets the aspect ratio according to their width and height ratio values.
initial: It is the default value for the aspect-ratio property.
inherit: The aspect-ratio value is inherited from its parent elements.

CSS aspect-ratio Examples

Example 1: This example displays the image in aspect-ration 1 / 1.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>CSS aspect-ratio Property</title>
    
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        img {
            width: 300px;
            aspect-ratio: 1 / 1;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        CSS aspect-ratio Property
    </h3>

    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
        alt="HTML Tutorial">
</body>

</html>

Output:

Example 2: This example displays the image in aspect-ration 16 / 9.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">

    <title>CSS aspect-ratio Property</title>
    
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        img {
            width: 300px;
            aspect-ratio: 16 / 9;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h3>
        CSS aspect-ratio Property
    </h3>

    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
        alt="HTML Tutorial">
</body>

</html>