How to scale without distortion
An aspect ratio is the proportional relationship between width and height. Keeping it constant while resizing is what prevents an image looking stretched or squashed.
The arithmetic is a proportion:
new height = new width × (original height ÷ original width)
Scaling 1920×1080 to a width of 1280: 1280 × (1080/1920) = 1280 × 0.5625 = 720. The ratio 1920:1080 simplifies to 16:9 by dividing both by their greatest common divisor of 120.
The ratios you will actually encounter
- 16:9 — the standard for video and most displays. 1920×1080, 2560×1440, 3840×2160.
- 4:3 — older displays, many tablets, and a lot of archive footage.
- 1:1 — square, still common in social feeds and avatars.
- 9:16 — vertical video for phone-first platforms.
- 21:9 — ultrawide monitors and much cinematic content.
- 3:2 — the classic 35mm photography ratio, still used by most cameras.
- 1.91:1 — the shape most social platforms use for link previews.
Doing this properly in CSS
The aspect-ratio property makes this trivial in modern CSS:
.video { aspect-ratio: 16 / 9; width: 100%; }
The element sizes its height from its width automatically at any viewport size. This replaces the old padding-bottom hack, which worked by exploiting the fact that percentage padding resolves against width.
For images, always set width and height attributes in the HTML even when CSS controls the display size. Browsers use them to reserve space before the image loads, which prevents layout shift — a measurable factor in Core Web Vitals. Pairing them with height: auto in CSS keeps the ratio while letting the width be responsive.
Fitting content into a different ratio
When source and target ratios differ, something has to give. The object-fit property controls what:
coverfills the box and crops the overflow — the usual choice for photographs.containfits the whole image inside, leaving empty space — right for logos and diagrams where nothing may be lost.fillstretches to fit, distorting the image. Almost never what you want.
With cover, object-position controls which part survives the crop. The default centres, which frequently cuts heads off portrait photographs — object-position: top is often a better default for people.
Practical points
Round carefully. Fractional pixels cause blurring on some renderers. Choose dimensions that divide cleanly — 16:9 works neatly at multiples of 16×9.
Never upscale. Enlarging beyond native resolution invents detail that was never captured. Export at the largest size you need and scale down.
Ratio is not resolution. 1280×720 and 3840×2160 are both 16:9. The ratio describes shape; resolution describes detail.
Serve responsive images. The srcset attribute lets browsers choose an appropriately sized file, which matters far more for performance than exact dimension choices.
Simplifying a ratio by hand
To reduce dimensions to their simplest ratio, divide both by their greatest common divisor. For 1920 and 1080 the GCD is 120, giving 16:9. For 2560 and 1600 the GCD is 320, giving 8:5 — which is the same as 16:10.
The Euclidean algorithm finds the GCD quickly: repeatedly replace the larger number with the remainder of dividing it by the smaller, until the remainder is zero. For 1920 and 1080: 1920 mod 1080 = 840, then 1080 mod 840 = 240, then 840 mod 240 = 120, then 240 mod 120 = 0. The GCD is 120.
This is worth knowing because design tools and specifications often quote dimensions rather than ratios, and recognising that 2560×1440 and 1280×720 are the same shape saves a lot of unnecessary recalculation.
Frequently asked questions
How do I keep an image proportional when resizing?
Multiply the new width by the original height divided by the original width. Scaling 1920x1080 to 1280 wide gives 1280 x 0.5625 = 720 high.
What is the difference between aspect ratio and resolution?
Aspect ratio is the shape - the proportion of width to height. Resolution is the pixel count. 1280x720 and 3840x2160 share the same 16:9 ratio at very different resolutions.
How do I set an aspect ratio in CSS?
Use the aspect-ratio property, for example aspect-ratio: 16 / 9 with width: 100%. This replaces the older padding-bottom percentage hack.
Should I set width and height on img tags?
Yes, even when CSS controls the display size. Browsers use them to reserve space before the image loads, preventing layout shift, which is measured by Core Web Vitals.