3 min read
•Question 26 of 49easyHow Does aspect-ratio Work?
Understanding CSS aspect-ratio property.
What You'll Learn
- aspect-ratio syntax
- Common ratios
- Use cases
Syntax
styles.cssCSS
.element {
aspect-ratio: 16 / 9; /* Width / Height */
aspect-ratio: 1; /* Square (1/1) */
aspect-ratio: 4 / 3;
}Examples
styles.cssCSS
/* Responsive video container */
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
/* Square profile image */
.avatar {
width: 100px;
aspect-ratio: 1;
border-radius: 50%;
}
/* Card image */
.card-image {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}With min/max
styles.cssCSS
.element {
aspect-ratio: 16 / 9;
min-height: 200px;
max-height: 500px;
}