Stop Your Page Jumping: Using aspect-ratio and Image Dimensions to Fix Layout Shift
By Mohak Mangal · Published October 26, 2026 · 7 min read
You've seen it. You start reading an article, the images finish loading, and the text you were reading slides down the screen. Or worse, you go to tap a button and the page moves, and you hit something else. That's layout shift, and it comes from one cause: the browser didn't know how tall the image would be until it arrived.
The fix is to tell the browser the shape of the thing up front. That's all aspect ratio is for.
Why it happens
When HTML contains an <img> with no size information, the browser has no idea how much space to leave. It lays out the text as if the image is zero pixels tall. When the file downloads and its true size becomes known, everything below gets shoved down. Google measures this as Cumulative Layout Shift (CLS), one of the Core Web Vitals, and a high score hurts the experience and can hurt search performance.
The simple fix: width and height attributes
Modern browsers use the width and height attributes to calculate an aspect ratio before the image loads, even if CSS later makes the image responsive:
<img src="photo.jpg" width="1200" height="800" alt="...">
Pair it with img { max-width: 100%; height: auto; } and the image scales down on small screens while keeping its 3:2 shape. This one habit solves most layout shift on content sites.
The CSS aspect-ratio property
For containers that aren't images (video embeds, cards, placeholders), use aspect-ratio:
.video { aspect-ratio: 16 / 9; width: 100%; }
The element will be as tall as it needs to be to keep a 16:9 shape at whatever width it gets. It's supported in all current major browsers. You can also use it to make square avatars (aspect-ratio: 1 / 1) without any height value.
The old padding trick, and why you may still see it
Before aspect-ratio existed, developers used a hack: a wrapper with height: 0 and padding-bottom: 56.25%. Where does 56.25 come from? It's height divided by width for 16:9, which is 9 ÷ 16 = 0.5625. For 4:3 it's 75%; for a square, 100%. You'll still find this in older code. It works, but it's harder to read and needs an absolutely positioned child. If you don't need to support very old browsers, replace it.
Calculating the numbers
Two formulas cover everything:
- height = width × (ratio height ÷ ratio width)
- padding percentage = (ratio height ÷ ratio width) × 100
An image that's 1920 × 1080 reduces to 16:9. A 1200-pixel-wide slot at that ratio is 675 pixels tall. If your design says a card image must be 4:5 and 320 pixels wide, it will be 400 tall. You can do these in your head, or check them with the aspect ratio calculator.
Cropping without distortion: object-fit
If the container's ratio doesn't match the image, add object-fit: cover to fill the frame by cropping, or object-fit: contain to show the whole picture with empty bars. Never let it default to stretching. Use object-position to choose which part gets kept, for instance object-position: top for portraits so heads aren't cut off.
Other common causes of shift
- Ads and embeds without reserved space. If you plan to show ads, give their slots a minimum height from the start. This matters for any site that will use AdSense.
- Web fonts that swap late. A different font size or width can reflow text. Use
font-display: swapwith a similar fallback. - Content injected above existing content, like a cookie banner pushing the page down. Overlay it instead.
How to test it
Open Chrome DevTools, throttle the network to "Slow 4G", and reload. Watch for jumps. The Performance panel and Lighthouse both report CLS, and a score under 0.1 is considered good. Fix the worst offenders first, usually the hero image.