How the shape of a screen — not just its size — determines how your web layout behaves.
Understanding aspect ratios is key to building layouts that hold up across every screen. An aspect ratio is the proportional relationship between a screen's width and height, expressed as W:H. A 16:9 screen is 16 units wide for every 9 units tall. The actual pixel dimensions can vary — 1920×1080 and 3840×2160 are both 16:9 — but the shape is the same.
≈ 1.778:1
The dominant ratio for modern monitors, TVs, and most desktop displays. Full HD, QHD, and 4K all use 16:9. The universal baseline for desktop web design.
≈ 1.600:1
Slightly taller than 16:9, giving more vertical space for content. Common on MacBooks and premium business laptops. Provides more comfortable reading space without scrolling.
≈ 1.333:1
The classic screen shape from the CRT era. Still relevant for iPad orientations and older corporate equipment. Much taller relative to its width than modern widescreen formats.
≈ 2.333:1
Found on gaming monitors and creative workstations. Extremely wide viewports can break layouts that lack a max-width container, leaving content spanning uncomfortably far.
≈ 0.563:1
The dominant ratio for smartphone screens held vertically — which is how most people browse the web. Over 60% of web traffic comes from this orientation.
≈ 1.000:1
Equal width and height. Not a common full-screen ratio, but important for embedded content, avatars, thumbnails, and social media image placeholders.
aspect-ratio in CSS The CSS aspect-ratio property lets you lock an element to a specific ratio without fixed pixel dimensions. This is especially useful for video embeds, image containers, and responsive cards.
/* Maintain 16:9 for video embeds */
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
/* Square profile image */
.avatar {
aspect-ratio: 1;
width: 3rem;
border-radius: 50%;
}
/* 4:3 card thumbnail */
.card-image {
aspect-ratio: 4 / 3;
object-fit: cover;
}An aspect ratio describes the proportional relationship between a screen's width and height. A 16:9 display is 16 units wide for every 9 units tall. Aspect ratios matter in web design because different screen shapes require layouts that adapt gracefully — a design built only for 16:9 may have too much or too little vertical space on 4:3 or 9:16 screens.
16:9 is the most common aspect ratio for desktop monitors, laptops, and televisions. However, 9:16 (portrait mobile) is the most common orientation for actual web browsing, since the majority of web traffic comes from smartphones held vertically.
All current MacBooks use a 16:10 aspect ratio. This includes the MacBook Air 13", MacBook Air 15", MacBook Pro 14", and MacBook Pro 16". The extra height compared to 16:9 provides more vertical content space, which is why MacBook users tend to see more above-the-fold content.
Use the CSS aspect-ratio property: aspect-ratio: 16 / 9 keeps an element at 16:9 regardless of its width. For older browser support you can use the padding-top hack (padding-top: 56.25% for 16:9), but aspect-ratio is well-supported in all modern browsers.
Ultrawide (21:9) monitors have very wide viewports, typically 3440px or wider. Without a max-width constraint on your main container, content stretches uncomfortably across the full width. Fix it with max-width: 1280px; margin: 0 auto on the main wrapper.
Looking for specific pixel dimensions for a device? See the Common Device Screen Sizes reference →
Want to know why testing across different aspect ratios matters? Read why testing screen sizes is important →
Use screensize.io to preview your website at any of these resolutions instantly — no DevTools needed.
Open screensize.io →