CSS Ratio Value

Last Updated : 10 Apr, 2023

The CSS aspect ratio is defined as the ratio of width to height (width:height). and aspect ratio of features specified as <ratio> value which represent the width to height viewport. We can also use min-aspect-ratio and max-aspect-ratio for min and max values respectively.

Valid ratios include:

16/9, 4/3, 800/600, and 1/1

For more https://www.geeksforgeeks.org/css-media-rule/

Example:

css

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
 
    <style>
        @media (min-aspect-ratio: 9/5) {
            div {
                background: #808000;
            }
        }
 
        @media (max-aspect-ratio: 3/2) {
            div {
                background: #ff99aa;
            }
        }
 
        @media(aspect-ratio:1/1) {
            div {
                background: #424395;
            }
        }
    </style>
</head>
 
<body>
    <div id="hello">
        LOOK AT THE ASPECT RATIOS.
        GEEKS FOR GEEKS BEST WEBSITE GEEKS.
    </div>
</body>
 
</html>