Layouts jump when images load late. aspect-ratio reserves the space.
Direct answer
The aspect-ratio property sets the ratio of an element's width to its height, such as 16 / 9. It keeps boxes proportional as they scale and reserves space for images and embeds so the layout does not shift.
Examples
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
.avatar {
width: 64px;
aspect-ratio: 1;
border-radius: 50%;
object-fit: cover;
}
img {
max-width: 100%;
height: auto;
}
<iframe class="video" src="https://www.youtube.com/embed/xyz" title="Video"></iframe>
Tips
- Combine with
object-fit: coverfor photos. - Also set
widthandheightattributes on images.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
One line replaces an old hack and prevents jumpy pages.
