CSS aspect ratio property is used to control the proportional relationship between the width and height of an element. It helps maintain the desired aspect ratio of elements, such as images, videos, and containers, regardless of their size or the size of the viewport.
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.
<!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.
<!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>
Output:
Supported Browsers:
- Google Chrome 88
- Edge 88
- Firefox 89
- Opera 74
- Safari 15