CSS object-fit: How to Fit Images in Containers

CSS object-fit controls how an image (or video) is resized to fit its container, preventing distortion and cropping. Use object-fit: cover to fill the container while cropping excess, or object-fit: contain to show the entire image with letterboxing. This property works on replaced elements like <img> and <video> when they have a set width and height.

When to Use object-fit

The property is essential in responsive layouts where images come from a CMS or user uploads and you need a uniform thumbnail size. Common use cases:

Product cards in e-commerce: all images display at the same dimensions without stretching.
User avatars: crop to a circle or square with cover.
Hero banners: background-like behavior for <img> elements.
Video embeds: maintain aspect ratio inside a fixed frame.

Without object-fit, setting an <img> to width: 100% and height: 200px stretches the image to fit, distorting it (the default is fill).

How to Choose the Right Value

Each object-fit value serves a different purpose:

contain – The whole image is visible, scaled down (or up) to fit inside the box. Adds letterboxing (empty space) if aspect ratios differ. Best for diagrams, logos, or when every part of the image must be seen.
cover – The image fills the entire box, cropping the overflow. Ideal for thumbnails and backgrounds where the center of the image is most important.
fill – Stretches the image to exactly match the box dimensions, ignoring aspect ratio. Causes distortion unless the ratios match. Avoid for photos, but sometimes used for decorative textures.
none – The image is not resized; it keeps its intrinsic size and is clipped by the box (or overflows if the box is smaller). Useful for pixel-art or when you want the original size exactly.
scale-down – Acts like none if the image is smaller than the box, otherwise like contain. It never enlarges the image, so it’s good for icons that shouldn’t blur.

For most photographic content, cover is the go-to. For images where the entire subject must be visible (e.g., a full screenshot), use contain.

Common Problems and Misconceptions

A frequent mistake is expecting object-fit to work without setting both width and height on the image. If the image has only width set (and height auto), the browser naturally maintains aspect ratio, and object-fit has no effect. You must define the element’s box dimensions explicitly.

Another confusion: object-fit vs. background-size. Both have similar values (cover, contain), but object-fit applies to the content of a replaced element, while background-size applies to a CSS background image. They are not interchangeable—use object-fit for semantic <img> tags, and background-size for decorative backgrounds.

Also note that object-fit does not affect the layout size of the element—only the rendering of the content inside it. The element still occupies the width/height you set, and the image is drawn according to the fit value.

Browser Support and Fallbacks

object-fit is supported in all modern browsers (Chrome, Firefox, Safari, Edge) since around 2015–2016. For older browsers, you can use a fallback: set a background-image and use background-size: cover on the same element, or use a polyfill. For most current projects, no fallback is needed.

Related Techniques and Alternatives

If you need to fit an image within a container without cropping, but also want to center it, combine object-fit: contain with object-position: center. The object-position property (default 50% 50%) controls where the image sits within the box—useful for cover to choose which part of the image is kept.

For responsive images that should never exceed their natural size, use scale-down or combine max-width: 100% with height: auto on the image itself (no object-fit needed). For complex layouts, CSS aspect-ratio boxes with object-fit: cover are a modern pattern.

Frequently Asked Questions

Does object-fit work on all HTML elements?

No, it only works on replaced elements—typically <img>, <video>, <canvas>, and <iframe>. For other elements, you’d need to use a background image or an SVG wrapper.

Why is my image still stretched with object-fit: cover?

Make sure you have set both width and height on the image element (e.g., img { width: 200px; height: 150px; object-fit: cover; }). If height is auto, the browser adjusts it to maintain aspect ratio, so no cropping occurs.

What’s the difference between object-fit: contain and scale-down?

contain can scale the image up to fill the box (if the image is smaller), while scale-down never scales up—it acts like none if the image is smaller than the box, and like contain if larger. Use scale-down to avoid blurry upscaling of small images.

Can I use object-fit with a CSS background image?

No, object-fit only applies to replaced elements. For background images, use background-size: cover or contain instead.

How do I center a cropped image with object-fit: cover?

Use the object-position property. For example, object-position: 50% 50% centers both horizontally and vertically (default). You can set top left or percentages to show a specific part of the image.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →