CSS aspect-ratio Property
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:
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.
<!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>w3wiki</h1>
<h3>
CSS aspect-ratio Property
</h3>
<img src=
"https://media.w3wiki.net/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>w3wiki</h1>
<h3>
CSS aspect-ratio Property
</h3>
<img src=
"https://media.w3wiki.net/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
Contact Us