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>
|
Output:
When opening window side is small .
After Resize:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Apple Safari
- Opera
Share your thoughts in the comments
Please Login to comment...