MoreLesson 220Free preview

Aspect Ratio

This lesson is part of How To · All levels

Summary

The aspect ratio is the ratio of the width and height of an element, for example 16:9 for video or 1:1 for avatar. The CSS aspect-ratio property allows automatic high-calculation of available widths. Before this property existed, developers used a padding-top trick with percentages.

Key points

Aspect-ratio: 16/9 sets the ratio of width and height
Just specify one dimension; the other dimension is automatically calculated
Use the object-fit: cover on the image so it doesn't get stuck
Old fallback with padding-top: 56.25% to 16:9 ratio

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.