You resize an image to fit a container and it looks wrong. The photo is distorted. People's faces are too wide or too narrow. The landscape that looked stunning at full size now looks like it was shot through a funhouse mirror. The problem is almost always the same: you changed the dimensions without preserving the aspect ratio.
Aspect ratio is the proportional relationship between width and height. It's one of those concepts that's simple in theory and surprisingly tricky in practice, especially when you're dealing with responsive layouts, multiple screen sizes, and media from different sources.
What aspect ratio actually means
An aspect ratio is expressed as two numbers separated by a colon: width:height. A 16:9 image is 16 units wide for every 9 units tall. The actual pixel dimensions don't matter -- 1920x1080, 1280x720, and 3840x2160 are all 16:9 because the ratio simplifies to the same proportion.
To calculate the aspect ratio from pixel dimensions, find the greatest common divisor (GCD) and divide both dimensions by it:
1920 / 1080 = 16/9 (GCD is 120)
1280 / 720 = 16/9 (GCD is 80)
800 / 600 = 4/3 (GCD is 200)
1080 / 1080 = 1/1 (GCD is 1080)
In code:
function gcd(a, b) {
return b === 0 ? a : gcd(b, a % b);
}
function aspectRatio(width, height) {
const divisor = gcd(width, height);
return `${width / divisor}:${height / divisor}`;
}
aspectRatio(1920, 1080); // "16:9"
aspectRatio(1440, 900); // "8:5"
aspectRatio(1024, 768); // "4:3"
The ratios you need to know
16:9 -- The dominant ratio for screens. HD (1280x720), Full HD (1920x1080), 4K (3840x2160). YouTube, Netflix, and most video content uses this ratio. If you're designing for screens, this is your default.
4:3 -- The old standard. CRT monitors and SD television. Still common in iPad displays and some presentation formats. PowerPoint defaults to 16:9 now, but the classic format was 4:3.
1:1 -- Square. Instagram posts popularized this format. Profile pictures and thumbnails are often square.
9:16 -- Vertical video. TikTok, Instagram Reels, YouTube Shorts. It's 16:9 rotated. Designing for mobile-first content means thinking in this ratio.
21:9 -- Ultrawide. Cinema-standard ratio (2.39:1 is close). Ultrawide monitors use this. If you've ever seen black bars on the top and bottom of a movie on your 16:9 TV, the movie was shot in a wider ratio.
3:2 -- Common for photography. Many digital cameras use sensor dimensions that produce 3:2 images (like 6000x4000). Also the Surface laptop screen ratio.
CSS and aspect ratio
CSS has a native aspect-ratio property that solves a problem that used to require hacks:
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
That's it. The browser calculates the height automatically based on the width. Before this property existed, the standard hack was the padding-bottom technique:
/* The old way - don't do this anymore */
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The padding-bottom trick works because padding percentages are calculated relative to the element's width, not its height. So padding-bottom: 56.25% creates a box that's 56.25% as tall as it is wide, which is 16:9. It was clever but unintuitive. The aspect-ratio property replaced it with readable code.
Browser support for aspect-ratio is now above 95% globally. There's no reason to use the padding hack in new code.
Image resizing without distortion
When you need to fit an image into a container with a different aspect ratio, you have two options:
Contain (letterbox). Scale the image to fit entirely within the container. The entire image is visible, but there may be empty space (bars) on the sides or top/bottom.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
Cover (crop). Scale the image to fill the container completely. No empty space, but parts of the image may be cut off.
img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover is the correct choice for most UI use cases -- thumbnails, hero images, card backgrounds. object-fit: contain is for situations where you can't lose any part of the image, like product photos or diagrams.
You can control which part of the image is visible with object-position:
img {
object-fit: cover;
object-position: top center; /* keep the top of the image visible */
}
Common mistakes
Stretching images by setting both width and height to fixed values. If you set width: 300px; height: 200px on an image that's 1920x1080, you're forcing a 16:9 image into a 3:2 box. It will stretch. Use object-fit or only constrain one dimension and let the other auto-calculate.
Ignoring device pixel ratio. A 300x200 CSS pixel image on a 2x Retina display renders at 600x400 device pixels. If the source image is only 300x200, it looks blurry. Serve images at 2x the display size for sharp rendering on high-DPI screens.
Not accounting for the aspect ratio of the viewport. Responsive layouts that look great on 16:9 laptop screens can break on 4:3 iPad screens or 9:16 mobile screens. Test your layouts at multiple viewport ratios, not just multiple widths.
Mixing up 16:10 and 16:9. Many laptop screens are 16:10 (1920x1200, 2560x1600), not 16:9. The difference is subtle but visible when you're designing pixel-precise layouts.
For quick conversions between dimensions at any aspect ratio -- figuring out what height you need for a given width at 16:9, or what width gives you a square crop of a landscape photo -- I built a calculator at zovo.one/free-tools/aspect-ratio-calculator. It handles the GCD math and gives you exact pixel dimensions.
Aspect ratio isn't glamorous, but getting it wrong is the difference between a professional-looking layout and one that makes users wince.
I'm Michael Lip. I build free developer tools at zovo.one. 350+ tools, all private, all free.
Top comments (0)