CSS aspect-ratio Property
The aspect-ratio property is used to set the preferred aspect ratio of the box. This property displays the different sizes of boxes on the basis of aspect-ratio values.
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.
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= 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= alt="HTML Tutorial"></body> </html> |
Output:
Supported Browsers:
- Google Chrome 88
- Edge 88
- Firefox 89
- Opera 74
- Safari 15
Please Login to comment...