The Basics of Aspect Ratio
An aspect ratio is the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, such as 16:9.
In web design, getting the aspect ratio right is the difference between a professional-looking site and a broken user experience.
Common Aspect Ratios
- 16:9 (Widescreen): The standard for high-definition video and most modern monitors.
- 4:3 (Traditional): The standard for older televisions and tablets like the iPad.
- 1:1 (Square): Popularized by Instagram and used for profile pictures and icons.
- 21:9 (Ultrawide): Used for cinematic experiences and high-end gaming monitors.
Aspect Ratio in Responsive Design
Before the CSS aspect-ratio property was widely supported, developers had to use the "padding hack" to maintain container proportions.
Today, we can simply write:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
Why it Matters for Core Web Vitals
Maintaining aspect ratios prevents Layout Shift. When an image or video loads, if the browser knows the aspect ratio, it can reserve the correct amount of space, preventing the page content from jumping around. This directly improves your Cumulative Layout Shift (CLS) score.
Try our Tool
Need to calculate the dimensions for a specific ratio? Use our Aspect Ratio Calculator to get the exact pixels you need.