What does the CSS aspect-ratio property do?

The aspect-ratio property locks an element to a fixed width-to-height ratio, so the browser reserves the correct height before the image or video loads. This removes layout shift and means you no longer need the old padding-bottom percentage hack.

What is the difference between object-fit cover and contain?

cover scales the image so it fully covers the box and crops whatever overflows, keeping the aspect ratio with no empty gaps. contain scales the image so the whole thing fits inside the box, also keeping the ratio, but it may leave letterbox bars. Use cover for hero or thumbnail images and contain when nothing can be cropped, such as logos.

When should I use object-position?

object-position controls which part of the image stays visible when object-fit crops it, which mainly matters with cover and none. For example object-position is top keeps faces or headlines in frame instead of cutting them off at the top. The default is center.

Does aspect-ratio work without object-fit?

Yes. aspect-ratio sizes the box, while object-fit only affects replaced elements such as img, video, canvas and iframe placed inside or styled directly. On a plain div, aspect-ratio alone reserves the space and object-fit has no effect.

Is the CSS aspect-ratio property widely supported?

Yes. aspect-ratio is supported in every current version of Chrome, Edge, Firefox and Safari and has been baseline since 2021. For very old browsers you can fall back to the padding-bottom percentage technique, but for modern projects the native property is the recommended approach.

How do I make a responsive image keep its ratio?

Give the image both an aspect-ratio and width 100 percent (optionally a max-width), then set object-fit to cover or contain. The image then scales fluidly with its container while always holding the chosen ratio. This tool generates exactly that block for you.

CSS Aspect Ratio and object-fit Helper

A hands-on CSS aspect-ratio and object-fit helper that turns two of the most confusing parts of responsive image layout into something you can see. Pick a ratio, flip through the five object-fit modes, nudge object-position, and the tool shows you exactly how a sample image is scaled and cropped inside the box — then hands you clean, copy-ready CSS. It is built for front-end developers, designers, and anyone fighting with stretched thumbnails, letterboxed heroes, or unwanted layout shift.

How it works

Modern CSS gives you two complementary tools. The aspect-ratio property locks an element to a fixed width-to-height shape, so the browser reserves the right height before the media loads — killing the cumulative layout shift that used to plague image grids. The object-fit property then decides how the actual pixels of a replaced element (img, video, canvas) fill that reserved box: fill stretches and can distort, cover fills and crops, contain fits and may letterbox, none keeps native size, and scale-down picks the smaller of none and contain.

This helper renders a real checkerboard box at your chosen ratio and drops a gradient sample image inside it. As you change the fit mode or object-position, the preview reflows live, so the difference between cover and contain stops being abstract. You can feed it a landscape, portrait, or square sample to stress test how each mode handles a mismatch between the image shape and the box shape. Type any custom ratio — say 1618:1000 — and it simplifies the fraction with a greatest-common-divisor reduction and reports the decimal ratio and orientation. Everything you set is mirrored into a CSS block you can copy or download, and your last configuration is saved in your browser so it is there next time.

Example

Suppose you want a responsive video thumbnail that is always 16:9, never distorts, and keeps faces near the top of the crop. Choose the 16:9 preset, set object-fit to cover, click top on the position grid, and drag container width to 100% with a max-width of 480px. The tool emits:

.media {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 480px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  display: block;
}

Paste that onto your img and every thumbnail in the grid holds the same shape, crops cleanly, and never shifts the layout while loading. Switch the sample to the portrait image and you will instantly see why cover is the safe default and why contain would have left bars on the sides.

Why it is in your browser

Every calculation, preview, and the generated CSS run entirely client-side — the sample image is an inline SVG, so nothing is uploaded, fetched, or stored on a server. It works offline and your settings stay on your machine.