Dev UtilitiesLesson 134Free preview
Aspect Ratio Calculator
This lesson is part of Web Developer Tools · All levels
Summary
The aspect ratio calculator helps maintain the ratio of width and height when changing the size of an image or video. The 16:9 ratio means 16 units wide for every 9 units high. If the width is changed, the new height is calculated in proportion so that the image is not flat. In CSS, the aspect-ratio property facilitates the maintenance of proportions on responsive layouts.
Key points
- Ratio is written wide:high, for example 16:9
- The proportional scale multiplies both sides by the same number
- New height = new width x original height / original width
- The CSS aspect-ratio property maintains the square ratio
- The object-fit helps the media to fill the box without distortion
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.