How To Scale and Crop Images with CSS object-fit

The CSS object-fit property controls how an image or video scales and crops within its container while preserving aspect ratio. Unlike traditional CSS sizing that stretches images to fit dimensions, object-fit gives you precise control: fill the container completely, fit the entire image without cropping, or crop strategically to focus on specific areas.

What does object-fit solve? When you set explicit width and height on an <img> element that doesn’t match the image’s natural aspect ratio, browsers stretch or squish the image by default. object-fit prevents distortion by scaling images proportionally and optionally cropping overflow, similar to how background-size works for background images, but directly on <img> elements.

When should you use it? Use object-fit for card layouts, galleries, hero images, avatars, thumbnails, and any responsive design where images must fit fixed dimensions without distortion. It’s particularly valuable in CSS Grid and Flexbox layouts where container sizes are determined by the grid or flex algorithm rather than the image’s natural dimensions.

In this tutorial, you’ll learn all five object-fit values (fill, cover, contain, none, and scale-down), how to combine them with object-position for precise cropping control, and when to choose object-fit over background-size for your use case.

• object-fit requires explicit dimensions. The property only works when the <img> element has both width and height set (via CSS or HTML attributes). Without dimensions, the image renders at its natural size and object-fit has no effect.

• cover fills the container and crops; contain shows the full image and may leave empty space. Use cover for hero images, cards, and thumbnails where you want no gaps. Use contain when the entire image must be visible, such as product photos or diagrams.

• object-position controls which part of the image is visible when cropped. By default, images are centered (50% 50%), but you can shift focus to faces, text, or important details using percentage or keyword values like top left, right center, or 20% 80%.

• object-fit works on replaced elements only. It applies to <img>, <video>, <iframe>, and <embed>, but not regular <div> elements. For non-replaced elements, use background-size with background-image instead.

• Browser support is excellent but not universal. object-fit is supported in all modern browsers (Chrome 31+, Firefox 36+, Safari 10+, Edge 16+). For older browsers, provide fallback styles or use a polyfill like object-fit-images.

• Performance is identical to standard image rendering. object-fit doesn’t affect image loading, file size, or rendering performance. The browser still downloads the full image; object-fit only controls how it’s displayed within the container.

To follow along with this tutorial, you should have:

• Basic understanding of CSS properties and values
• Familiarity with inline CSS using the style attribute or external stylesheets
• A code editor
• A modern web browser that supports object-fit and object-position (Chrome 31+, Firefox 36+, Safari 10+, or Edge 16+)

object-fit only works when the image element has explicit dimensions. Without both width and height set, the browser renders the image at its natural size, and object-fit has no visible effect.

You can set dimensions in three ways:

1. HTML attributes (recommended for performance):

   <img src="image.jpg" width="600" height="400" alt="Description">
   

2. Inline CSS:

   <img src="image.jpg" style="width: 600px; height: 400px;" alt="Description">
   

3. External CSS:

   .image-container img {
     width: 600px;
     height: 400px;
   }
   

Why dimensions matter: The browser needs a defined container size to calculate how the image should scale and crop. If you only set width, the height defaults to auto, and the image maintains its natural aspect ratio, defeating the purpose of object-fit.

Best practice: Always include width and height attributes in your HTML. This prevents Cumulative Layout Shift (CLS) by reserving space before the image loads, improving Core Web Vitals scores and user experience.

When an image has dimensions that don’t match its natural aspect ratio, browsers stretch or compress the image to fill the container. This creates visual distortion.

Consider this example with a 1200×674px image displayed at 600×337px (matching aspect ratio):

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 600px; height: 337px;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
    >
  </div>

The image displays correctly because the container dimensions match the image’s aspect ratio (approximately 16:9).

Now, when the layout requires a different aspect ratio (300px wide by 337px tall):

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
    >
  </div>

The image appears squished horizontally because the browser stretches it to fill the 300×337px container, distorting the aspect ratio. This is where object-fit solves the problem.

fill is the default value and doesn’t preserve aspect ratio. The image stretches to fill the entire container, matching the behavior you see without object-fit.

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: fill;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: fill."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px; object-fit: fill;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: fill."
    >
  </div>    

When to use fill: Rarely. This value produces the same distorted result as the default behavior. You might use it intentionally for artistic effects or when working with images designed to stretch (like patterns or gradients), but in most cases, you’ll want cover or contain instead.

cover preserves aspect ratio and fills the container completely, cropping overflow as needed. The image scales to cover the entire container, ensuring no empty space, but parts of the image may be cut off.

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: cover;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 with object-fit: cover."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px; object-fit: cover;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 with object-fit: cover."
    >
  </div>    

In this example, the image maintains its aspect ratio and fills the 300×337px container. Because the container is taller than the image’s scaled width would allow, the left and right edges are cropped.

When to use cover: Perfect for hero images, card layouts, thumbnails, avatars, and any design where you need consistent container sizes without gaps. It’s the most commonly used object-fit value in modern web design.

Common use cases:

• Product card images in e-commerce grids
• User profile pictures in social feeds
• Hero banner images
• Gallery thumbnails with uniform dimensions

contain preserves aspect ratio and fits the entire image within the container, potentially leaving empty space. The image scales down to fit completely inside the container without cropping.

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: contain;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: contain."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px; object-fit: contain;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: contain."
    >
  </div>    

Here, the entire image is visible, but vertical space appears above and below because the container is taller than the image’s scaled dimensions.

When to use contain: Ideal when the full image must be visible, such as product photos, diagrams, logos, instructional images, or any content where cropping would remove important information.

Styling empty space: You can control the background color of the empty space using the container’s background-color:

.image-container {
  width: 300px;
  height: 337px;
  background-color: #f0f0f0; /* Visible in empty areas */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

none displays the image at its natural size without scaling. If the image is larger than the container, it appears cropped. If smaller, it displays at actual size with empty space around it.

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: none;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: none."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px; object-fit: none;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: none."
    >
  </div> 

Since the original image (1200×674px) is larger than the 300×337px container, only a portion is visible. The image doesn’t scale; it’s cropped to fit the container bounds.

When to use none: Useful for pixel-perfect designs, icon sprites, or when you want to show a specific region of a larger image without scaling. Often combined with object-position to control which part of the image is visible.

scale-down behaves like contain or none, whichever results in a smaller displayed size. If the image is larger than the container, it scales down like contain. If it’s already smaller, it displays at natural size like none.

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: scale-down;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: scale-down."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px; object-fit: scale-down;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: scale-down."
    >
  </div>

In this case, the image scales down to fit (like contain) because that produces a smaller result than displaying at natural size.

When to use scale-down: Helpful when you have images of varying sizes and want to prevent upscaling. Small images stay at their natural size, while large images scale down to fit. Less common than cover or contain, but useful for mixed-content galleries.

object-position controls which part of the image is visible when object-fit crops it. By default, images are centered (50% 50%), but you can shift the focal point to any area.

The property accepts:

• Keyword values: top, bottom, left, right, center, or combinations like top left, right center
• Percentage values: 20% 80% (horizontal vertical)
• Length values: 10px 20px (pixels, em, rem, etc.)

Centering and Basic Positioning

Starting with object-fit: cover:

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="300"
      height="337"
      style="width: 300px; height: 337px; object-fit: cover;"
      alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 300 x 337 with object-fit: cover."
    >
  </div>

Positioning to the Right Edge

To reveal the rightmost portion of the image:

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  alt="Sample image cropped to display an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: cover and object-position: 100% 0."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="300"
      height="337"
      style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
      alt="Sample image cropped to display an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: cover and object-position: 100% 0."
    >
  </div>

The 100% 0 value positions the image so its right edge aligns with the container’s right edge, and the top edge aligns with the container’s top. The turtle on the left is now cropped out.

Positioning Outside Container Bounds

You can use negative or values greater than 100% to create offset effects:

<img
  src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  alt="Sample image cropped to display part of a turtle and part of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: cover and object-position: -20% 0."
/>

  <div style="text-align: center; margin-bottom: 0.5em; margin-top: 0.5em;">
    <img
      src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
      width="600"
      height="337"
      style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
      alt="Sample image cropped to display part of a turtle and part of an alligator that is swimming in the water - scaled to 300 x 337 - with object-fit: cover and object-position: -20% 0."
    >
  </div>

The -20% 0 value shifts the image 20% to the left, creating empty space on the right and cropping both the turtle and alligator heads.

Common object-position Patterns

Face detection positioning: When cropping profile pictures, position faces in the upper-center:

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center top; /* Focus on face area */
  border-radius: 50%;
}

Product photo focus: For e-commerce, center products horizontally and position them in the upper third:

.product-image {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: center 30%; /* Product in upper area */
}

Text-heavy images: When images contain text, ensure it’s readable:

.hero-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center center; /* Keep text centered */
}

Card Layout with Uniform Image Sizes

E-commerce and content cards often require images of different aspect ratios to fit identical containers:

<div class="card-grid">
  <div class="card">
    <img src="product-1.jpg" alt="Product 1" class="card-image">
    <h3>Product Title</h3>
    <p>Description text</p>
  </div>
  <div class="card">
    <img src="product-2.jpg" alt="Product 2" class="card-image">
    <h3>Product Title</h3>
    <p>Description text</p>
  </div>
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0 0;
}

This ensures all product images fill their 200px-tall containers uniformly, cropping as needed while maintaining aspect ratios.

Responsive Hero Image

Hero sections need images that fill the viewport width while maintaining a consistent height:

<header class="hero">
  <img src="hero-image.jpg" alt="Hero banner" class="hero-image">
  <div class="hero-content">
    <h1>Welcome to Our Site</h1>
    <p>Compelling headline text</p>
  </div>
</header>

.hero {
  position: relative;
  width: 100%;
  height: 60vh;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 1;
}

The image covers the entire hero container at any viewport size, with content overlaid on top.

Avatar Grid with Circular Cropping

User avatars in social feeds or team pages benefit from object-fit combined with border-radius:

<div class="avatar-grid">
  <img src="user1.jpg" alt="User 1" class="avatar">
  <img src="user2.jpg" alt="User 2" class="avatar">
  <img src="user3.jpg" alt="User 3" class="avatar">
</div>

.avatar-grid {
  display: flex;
  gap: 1rem;
}

.avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;
  object-position: center top; /* Focus on faces */
  border-radius: 50%;
  border: 2px solid #fff;
}

Circular avatars maintain consistent sizing regardless of source image dimensions, with faces positioned in the visible area.

Gallery with Mixed Aspect Ratios

Image galleries often contain photos with varying aspect ratios that need to display uniformly:

<div class="gallery">
  <img src="photo1.jpg" alt="Photo 1" class="gallery-item">
  <img src="photo2.jpg" alt="Photo 2" class="gallery-item">
  <img src="photo3.jpg" alt="Photo 3" class="gallery-item">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.gallery-item {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.gallery-item:hover {
  transform: scale(1.05);
}

All gallery images fill their grid cells uniformly, creating a cohesive visual layout.

Both object-fit and background-size control how images scale within containers, but they serve different purposes.

Use object-fit when

• Working with semantic <img> elements for accessibility, SEO, and screen readers
• Images are content, not decorative (product photos, user avatars, article images)
• You need lazy loading with the native loading="lazy" attribute
• Images should be right-clickable for saving or opening in new tabs
• You want better performance with responsive images (srcset, sizes)

Use background-size when

• Images are purely decorative (patterns, textures, hero backgrounds)
• You need multiple layered images or complex positioning
• You want advanced effects like gradients, filters, or blend modes combined with images
• The image isn’t meaningful content and doesn’t need alt text

Side-by-Side Comparison

object-fit example:

<img 
  src="product.jpg" 
  alt="Product description"
  style="width: 300px; height: 300px; object-fit: cover;"
>

background-size equivalent:

<div 
  style="width: 300px; height: 300px; background-image: url('product.jpg'); background-size: cover; background-position: center;"
  role="img"
  aria-label="Product description"
></div>

Performance note: <img> elements with object-fit benefit from browser-native image optimization, responsive image attributes, and better caching. Background images are treated as CSS resources and may have different loading priorities.

For a deeper dive into styling images with CSS, see our guide on how to style images with CSS.

object-fit Has No Effect

Problem: Setting object-fit doesn’t change the image appearance.

Solution: Ensure the image has explicit width and height values. Without both dimensions, object-fit cannot calculate scaling.

/* ❌ Won't work - missing height */
img {
  width: 300px;
  object-fit: cover;
}

/* ✅ Works - both dimensions set */
img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Image Appears Cropped Incorrectly

Problem: Important parts of the image are cut off when using object-fit: cover.

Solution: Use object-position to adjust the focal point:

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: center top; /* Focus on upper portion */
}

For faces, try object-position: center 30% to position them in the upper third.

Empty Space with object-fit: contain

Problem: contain leaves unwanted gaps around images.

Solution: Set a background color on the container to fill empty space, or switch to cover if cropping is acceptable:

.image-wrapper {
  width: 300px;
  height: 300px;
  background-color: #f5f5f5; /* Fills empty space */
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

object-fit Not Working in Older Browsers

Problem: Images appear distorted in Internet Explorer or very old browsers.

Solution: Provide a fallback using @supports or use a polyfill:

/* Fallback for older browsers */
img {
  width: 300px;
  height: 200px;
  /* Old browsers will stretch - acceptable degradation */
}

/* Modern browsers get object-fit */
@supports (object-fit: cover) {
  img {
    object-fit: cover;
  }
}

For production, consider object-fit-images polyfill for broader compatibility.

Images Loading Slowly Cause Layout Shift

Problem: Page layout jumps when images load (Cumulative Layout Shift).

Solution: Always include width and height attributes in HTML to reserve space:

<!-- ✅ Prevents layout shift -->
<img 
  src="image.jpg" 
  width="300" 
  height="200" 
  alt="Description"
  style="object-fit: cover;"
>

<!-- ❌ Causes layout shift -->
<img 
  src="image.jpg" 
  alt="Description"
  style="width: 300px; height: 200px; object-fit: cover;"
>

The HTML attributes allow the browser to calculate aspect ratio before the image loads, preventing shifts.

Image Optimization

object-fit doesn’t affect image file size or download time. Always optimize source images:

• Use modern formats (WebP, AVIF) with fallbacks
• Implement responsive images with srcset and sizes
• Compress images appropriately for their display size
• Consider using a CDN for faster delivery

Responsive Images with object-fit

Combine object-fit with responsive image attributes for optimal performance:

<img
  srcset="
    image-400w.webp 400w,
    image-800w.webp 800w,
    image-1200w.webp 1200w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  src="image-800w.jpg"
  width="800"
  height="600"
  style="width: 100%; height: 400px; object-fit: cover;"
  alt="Responsive image description"
  loading="lazy"
>

The browser selects the appropriate image size based on viewport, and object-fit handles the scaling and cropping.

CSS Grid and Flexbox Integration

object-fit works seamlessly with modern layout methods:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.grid-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Grid and Flexbox determine container sizes; object-fit ensures images fill those containers correctly.

Accessibility Best Practices

• Always include descriptive alt text for images
• Ensure sufficient color contrast if text overlays images
• Test with screen readers to verify image descriptions
• Consider object-position adjustments for images with important text

For more on accessible image practices, see our tutorial on how to style figure and image HTML elements with CSS.

What does object-fit do in CSS?

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.

What is the difference between object-fit: cover and contain?

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.

Does object-fit maintain aspect ratio?

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.

How do I center the cropped area of an image?

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 */
}

What is object-position and when should I use it?

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

Is object-fit better than using background images?

It depends on your use case. Use 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.

Can I use object-fit with videos?

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>

Why isn’t object-fit working on my image?

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.

Does object-fit work in all browsers?

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.

Can I animate object-fit or object-position?

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.

The CSS object-fit property provides precise control over image scaling and cropping, solving the common problem of distorted images in fixed-size containers. By preserving aspect ratios and allowing strategic cropping, it enables consistent, professional layouts across different image dimensions.

Key points to remember:

• Always set both width and height for object-fit to work
• Use cover for filling containers without gaps; use contain when the full image must be visible
• Combine object-fit with object-position to control which part of the image is visible
• Prefer object-fit over background-size for semantic, accessible images
• Include dimension attributes in HTML to prevent layout shifts

object-fit also supports the standard CSS keyword values: inherit, initial, and unset. Before using object-fit in production, verify browser support for your target audience using Can I Use?.

For more CSS techniques, explore our guides on CSS alignment and justification, adjusting content padding, borders, and margins, and styling images with CSS. Check out our CSS topic page for more exercises and programming projects.