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

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 or Core Idea

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

.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.

.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.