CSS object-fit generator — crop or letterbox images in a fixed box

How to use the CSS object fit generator

1. Choose an object-fit value: cover, contain, fill, none or scale-down.
2. Pick an object-position, such as center, top or bottom right, to anchor the image.
3. Set the Box width and Box height (80–400 px) to match the space on your page.
4. Switch Sample image between Landscape and Portrait to see how each shape behaves.
5. Compare the large preview with the five small tiles, then copy the img rule.

What it does and when to use it

Real images come in every shape, but layouts often need a fixed box: square avatars, equal-height product cards, video thumbnails and hero banners. object-fit decides how an image of the wrong shape fills such a box without being squashed. cover is the usual choice for thumbnails and avatars; contain is right for logos and product shots where nothing may be cut off.

To give the box a responsive shape instead of fixed pixels, pair this with the aspect ratio generator. To crop the file itself, use the image cropper, and to round the corners of the box, the border radius generator.

How it works

The tool writes an img rule with your width and height in pixels, the object-fit value, and object-position only when it is not centre. The preview shows your box with a dashed outline, then the same sample image in all five modes at 120 × 120 px, with your chosen mode marked “(selected)”.

MDN lists object-fit and object-position as Baseline widely available since January 2020.

Worked examples

Square crop, the default. 240 × 240 px with cover:

img {
  width: 240px;
  height: 240px;
  object-fit: cover;
}

A tall slot that shows the whole picture. 240 × 320 px, contain, top, landscape sample: the rule adds object-fit: contain; and object-position: top;. The full image sits against the top edge with empty space below, instead of floating in the middle.

A round avatar that keeps the face. 96 × 96 px, cover, top: width: 96px; height: 96px; object-fit: cover; plus object-position: top;. On a portrait photo, cover must trim the extra height, and top makes it trim only from the bottom, so the head stays in view. Add border-radius: 50% for a circle.

Limits and tips

• The rule targets every img. Change the selector to a class, such as .thumb, before using it in a real stylesheet.
• Cropping hides content, so never use cover on images that contain text people must read, such as charts or posters.
• Give the img real dimensions. object-fit only matters when the box shape differs from the image shape.