How To Scale and Crop Images with CSS object-fit

object-fit controls how an image or video scales and crops within its container while preserving aspect ratio. It prevents distortion when container dimensions don't match the image's natural aspect ratio by scaling proportionally and optionally cropping overflow.

Let's understand the difference with an example:

Suppose you have a container that is 200px by 200px, and you place a wide image (for example, 400px by 200px) inside it.

• With object-fit: cover, the image will fill the container entirely, covering the full 200px by 200px space. To do this, it maintains the aspect ratio and may crop parts of the image that don't fit.

• With object-fit: contain, the whole image will be visible inside the container without cropping. The image is scaled down so both its width and height fit within the 200px box. This means there may be empty space (letterboxing) at the top and/or sides.

Example CSS:

img.cover {

 width: 200px;

 height: 200px;

 object-fit: cover;

}

img.contain {

 width: 200px;

 height: 200px;

 object-fit: contain;

}

Result:

• cover crops to fill, no empty space.

• contain shows the full image, with possible empty space.

Yes, except for object-fit: fill, which stretches the image to fill the container and may distort it. All other values (cover, contain, none, scale-down) preserve the image's original aspect ratio.

Use object-position: center (or 50% 50%, which is the default). For more precise control, combine with object-fit: cover:

img {

 width: 300px;

 height: 300px;

 object-fit: cover;

 object-position: center; /* Centers the visible portion */

}

object-position controls which part of an image is visible when object-fit crops it. This is useful when you want to emphasize a specific part of an image, such as centering a person's face in an avatar, highlighting a product, or focusing on an area containing important text.

For example, suppose you have an avatar image where the person's face is near the top of the image. By default, object-position: center; will center the crop, but you can shift the crop to keep the face visible by using object-position: center top;:

.avatar {

 width: 100px;

 height: 100px;

 object-fit: cover;

 object-position: center top; /* Keeps the top (where face is) visible */

}

You should use object-position whenever you need to adjust which part of a cropped image is visible such as focusing on faces in avatars, products in product shots, or key content in hero banners. It accepts keyword values (top, left, center) or percentages (20% 80%).

It depends on your use case. Use `[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

) with <img> elements when images are content (better for SEO, accessibility, and performance with responsive images). Use background-size with background-image for decorative images or when you need advanced layering effects. For semantic, accessible images, object-fit` is generally preferred.

Yes, object-fit works with <video> elements the same way it works with images:

<video width="800" height="450" style="object-fit: cover;" controls>

 <source src="video.mp4" type="video/mp4">

</video>

The most common reason is missing dimensions. object-fit only works if the image (or video) has both width and height set, either via HTML attributes or with CSS.

Example:

<!-- This will NOT work as expected (no width/height specified) -->

<img src="photo.jpg" style="object-fit: cover;">

<!-- This WILL work (explicit dimensions set) -->

<img src="photo.jpg" width="300" height="200" style="object-fit: cover;">

In the first example, object-fit has no effect because the browser uses the image’s natural size. In the second example, the image scales and crops to exactly 300×200 pixels as expected.

object-fit is supported in all modern browsers (Chrome 31+, Firefox 36+, Safari 10+, Edge 16+). It's not supported in Internet Explorer. For IE support, use a polyfill like object-fit-images or provide fallback styles.

Yes, both properties are animatable. You can create smooth transitions:

img {

 object-fit: cover;

 object-position: center;

 transition: object-position 0.3s ease;

}

img:hover {

 object-position: center top;

}

This is useful for interactive galleries or hover effects.