Object-Fit & Aspect-Ratio Previewer

Thumbnails, avatars and hero pictures rarely arrive in the shape of the box that holds them. A photo taken in landscape is dropped into a square card, an avatar is taller than it is wide, a banner has to cover a strip of variable height. The object-fit property tells the browser what to do with the mismatch, and object-position decides which part stays in view. Seeing all five values at once makes the difference clear faster than any description.

The five values

fill stretches the image to the box and ignores proportions, so circles become ovals. contain scales the image down until all of it fits, leaving empty bars on two sides. cover scales it up until it fills the box and crops what overflows, which is what most thumbnails want. none ignores the box and draws the image at its natural size, cropped or surrounded by space. scale-down behaves like none or contain, whichever gives the smaller picture, so a small icon is never enlarged.

A worked example

Press Sample: a 1600 by 900 pixel scene in a 300 by 200 pixel box, cover, centred. The readout shows the drawn size as 356 by 200 pixels with an offset of about -28 pixels across, and 84.4% of the image visible. Cover scaled the picture to a height of 200, which makes the width 355.6, and the extra 55.6 pixels are cropped equally from both sides. Switch to contain and the drawn size becomes 300 by 169 with an offset of 16 pixels down, and all of the image is visible. fill draws 300 by 200 and distorts the scene, and none draws 1600 by 900 so only 4.2% is in view.

Choosing the crop

object-position is the anchor of the crop. The default 50% 50% keeps the centre. A portrait on a wide banner usually needs the top, so use 50% 20% rather than the middle, where the chin and shoulders would stay and the eyes be cut off. The sliders go from 0% to 100% for both axes, and the generated line reads for example object-position: 30% 70%;. With contain, position decides where the bars go. When the image has the exact proportions of the box there is nothing to move.

Writing the CSS

The output starts with width: 100%; and the object-fit line, and adds object-position only when you moved it from the centre. If you fill the aspect-ratio field with something like 16 / 9, the rule gains aspect-ratio: 16 / 9; at the top, which keeps the box in proportion while its width changes with the layout and prevents the page from jumping as pictures load. With an aspect ratio on the box you can drop the fixed height.

Edge cases

An img with only width set keeps its natural proportions; object-fit matters only when both dimensions are fixed or driven by the layout. Very large sources waste bandwidth when displayed small, so pair this with correctly sized files or srcset. Non-image content such as video obeys the same rules. Vector pictures without an intrinsic size behave differently under none, so test them.

Limits

The tester shows geometry, not file quality: it does not resize, crop or compress images, and the picture you load stays in your browser. The five previews use the box proportions you set. Focal-point cropping that follows faces needs server software.

Related tools

• Aspect Ratio Calculator finds the ratio and the missing dimension.
• Placeholder Image Generator makes images of the exact size to test with.
• CSS Filter Generator adjusts the picture after it fits.
• Image Resizer makes the file itself the right size.