# CSS object-fit and object-position: Crop and Align Replaced Elements

Source: https://devdocs10.com/articles/css/css-object-fit  
By Murat Bo · Published 2026-09-04 · DevDocs10 (https://devdocs10.com)

CSS `object-fit` and `object-position` control how replaced elements such as images and videos fill their boxes. They are essential when you want consistent cropping, predictable sizing, and precise visual alignment without changing the source file.

> **Quick answer:** Use `object-fit` to decide how the content scales inside its box, and use `object-position` to choose which part of the content stays visible. Together, they solve the common “image looks stretched or cropped in the wrong place” problem.

> **Difficulty:** Beginner
>
> **You'll understand this better if you know:** basic CSS selectors, the box model, and how width and height affect an element’s size.

## 1. What Is object-fit and object-position?

`object-fit` tells the browser how to size the content of a replaced element when its rendered box does not match the content’s natural aspect ratio. Common examples are `<img>`, `<video>`, and `<iframe>`.

`object-position` controls where that content sits inside the box after sizing and cropping happen.

- `object-fit` affects scaling and cropping.
- `object-position` affects alignment inside the box.
- They work on replaced elements, not on ordinary text containers.
- They are often used for responsive cards, avatars, hero images, and video thumbnails.

## 2. Why object-fit and object-position Matter

Without these properties, images often stretch to match the container or appear awkwardly cropped by layout rules elsewhere. That can make product photos, profile images, and media previews look unprofessional.

These properties help you keep a fixed layout while preserving visual quality. You can fill a card with a photo, keep faces centered, or keep important details visible near the top of a banner image.

## 3. Basic Syntax

The most common pattern is to give the element a fixed box size, then decide how the media should behave inside it.

### Minimal example

Here, the image fills a 300 by 200 pixel box without being stretched out of proportion.

```css
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}
```

This means the image will scale to cover the entire box, and any overflow will be cropped instead of distorted.

### How `object-position` fits in

If the default center crop is not ideal, you can shift the visible area.

```css
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
  object-position: 50% 20%;
}
```

The first value moves the image horizontally, and the second value moves it vertically. This is useful when the important part of the image is not in the center.

## 4. Step-by-Step Examples

### Example 1: Fill a card image without distortion

This is the most common use case for product cards and blog thumbnails. The box stays consistent, and the image crops to fit.

```css
img.card-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
```

This prevents the image from looking squashed when the card width changes.

### Example 2: Show the full image

Use `contain` when you need the entire image visible, even if empty space appears around it.

```css
img.logo {
  width: 160px;
  height: 80px;
  object-fit: contain;
  background: white;
}
```

This is common for logos, diagrams, and images where cropping would hide important information.

### Example 3: Crop from the top for a portrait

When a face or subject is near the top of the image, a centered crop may cut off the important area. Adjusting the position fixes that.

```css
img.portrait {
  width: 240px;
  height: 320px;
  object-fit: cover;
  object-position: center top;
}
```

This keeps the upper part of the content visible while still filling the frame.

### Example 4: Use scale-down for smaller assets

`scale-down` behaves like `none` or `contain`, whichever results in the smaller rendered size. It is helpful when you want to avoid enlarging small images unnecessarily.

```css
img.icon {
  width: 48px;
  height: 48px;
  object-fit: scale-down;
}
```

This is useful when an image might already be smaller than the target box.

## 5. Practical Use Cases

- Responsive product cards where every image needs the same shape.
- Avatar circles that should center a person’s face consistently.
- Hero banners where the focal point must stay visible across screen sizes.
- Video previews that need to fill a thumbnail tile without distortion.
- Logo slots where the full mark should remain visible.

## 6. Common Mistakes

### Mistake 1: Expecting `object-fit` to work without a size

`object-fit` only matters when the replaced element has a constrained box. If the image keeps its natural dimensions, there is nothing to fit.

**Problem:** The image is not filling a fixed frame because the element has no explicit height, so the browser just uses the image’s natural size.

```css
img.thumb {
  width: 100%;
  object-fit: cover;
}
```

**Fix:** Give the element a real box size, such as a fixed height or an aspect-ratio-based container.

```css
img.thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
```

The corrected version works because the browser now has a box to fill.

### Mistake 2: Using `object-fit` on a normal `div`

These properties are for replaced elements. A plain `div` with a background image uses different properties.

**Problem:** The rule has no visible effect because `object-fit` does not control background images on regular elements.

```css
div.hero {
  background-image: url("hero.jpg");
  object-fit: cover;
}
```

**Fix:** Use `background-size` and `background-position` for background images, or switch to an actual `<img>` element if you need `object-fit`.

```css
div.hero {
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center center;
}
```

The fixed version works because the correct property pair is being used for a background image.

### Mistake 3: Forgetting that `object-position` works with coordinates or keywords

Beginners often set the wrong syntax, especially when trying to align the content to a corner. The browser accepts several forms, but not every string is valid.

**Problem:** The declaration is invalid because the value uses a single unsupported keyword combination for the intended result.

```css
img.banner {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top-left;
}
```

**Fix:** Use valid values such as `left top`, `center top`, or percentage values.

```css
img.banner {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: left top;
}
```

The corrected version works because the browser can interpret the alignment values properly.

## 7. Best Practices

### Use `cover` for framed media

If the element is part of a card, thumbnail, or hero frame, `cover` usually gives the cleanest result because it preserves aspect ratio while filling the box.

```css
img.feature {
  width: 100%;
  height: 260px;
  object-fit: cover;
}
```

This avoids distortion and keeps layouts visually consistent.

### Use `contain` when cropping would be harmful

For logos, illustrations, diagrams, and screenshots, showing the whole asset is often more important than filling every pixel of the box.

```css
img.diagram {
  width: 100%;
  height: 240px;
  object-fit: contain;
}
```

This preserves the full image even if the box has empty space.

### Adjust `object-position` to protect the focal point

Instead of editing every source image, shift the crop point in CSS when the subject is off-center.

```css
img.team-member {
  width: 240px;
  height: 240px;
  object-fit: cover;
  object-position: 50% 10%;
}
```

This keeps the visual focus where users expect it.

## 8. Limitations and Edge Cases

- `object-fit` does not change the intrinsic size of the file; it only changes how it is rendered in the box.
- These properties do not work the same way on ordinary elements with `background-image`.
- If the element has no constrained width or height, the effect may appear as if it is not working.
- With `cover`, some content will be hidden by design, which can matter for text inside images or screenshots.
- `object-position` only affects the visible portion after sizing; it cannot make a cropped area reappear if the box is too small.
- Browser support is good in modern browsers, but older browsers may not support every value consistently.

## 9. Practical Mini Project

Here is a small responsive media card that uses both properties to keep thumbnails looking clean and consistent.

```css
.card {
  width: 320px;
  border: 1px solid #ddd;
  border-radius: 12px;
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center top;
}

.card h3 {
  margin: 0;
  padding: 16px;
}
```

This card keeps every thumbnail aligned, cropped, and framed consistently. The image stays full width, the visible area is predictable, and the title can sit directly below it without layout jumps.

## 10. Key Points

- `object-fit` controls how replaced content scales within its box.
- `object-position` controls which part of the content is visible.
- `cover` fills the box and may crop content.
- `contain` shows the full content and may leave empty space.
- These properties are especially useful for responsive images and video.
- They work best when the element has a known size.

## 11. Practice Exercise

Try building a three-tile gallery with these requirements:

- Each tile should be the same height.
- The first image should fill the tile and crop from the center.
- The second image should fill the tile but keep the top of the image visible.
- The third image should always show fully, even if empty space appears.

**Expected result:** the gallery looks balanced, but each tile uses a different fit strategy for a different kind of media.

**Hint:** Use one selector for all images, then override `object-fit` and `object-position` per tile.

```css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery img {
  width: 100%;
  height: 220px;
}

.gallery img.center-crop {
  object-fit: cover;
  object-position: center center;
}

.gallery img.top-crop {
  object-fit: cover;
  object-position: center top;
}

.gallery img.full-view {
  object-fit: contain;
  background: #f5f5f5;
}
```

## 12. Final Summary

`object-fit` and `object-position` give you precise control over how images and other replaced elements appear inside a fixed layout. They are the CSS tools you reach for when the content must stay visually clean without being stretched or manually edited for every container size.

Use `cover` when the frame matters most, `contain` when the full asset matters most, and `object-position` when the focal point needs adjustment. Once you understand the difference, it becomes much easier to build responsive media layouts that look intentional on every screen.

Next, practice combining these properties with `aspect-ratio` and responsive layout techniques so your images stay consistent as the page resizes.

## Browser Support

| Feature | Status | Chrome | Edge | Firefox | Safari | Safari iOS |
| --- | --- | --- | --- | --- | --- | --- |
| object-fit | Widely available since Jul 2022 | 32+ | 79+ | 36+ | 10+ | 10+ |

Data: web-features 3.43.0 (MDN Baseline).