Hack Frontend Community

CSS Object-fit and Object-position

object-fit and object-position are CSS properties that allow you to control how content (images, videos) is displayed inside its container while maintaining aspect ratio.

What is object-fit?

object-fit determines how content (usually <img> or <video>) should be scaled and positioned inside its container.

object-fit Values

ValueDescriptionBehavior
fillFills entire containerStretches, may distort
containFits inside containerPreserves proportions, may have empty areas
coverFills container preserving proportionsMay be cropped but fills entire container
noneOriginal sizeDoes not scale, may be cropped
scale-downScales down if neededLike none or contain, chooses smaller size

Usage Examples

fill — Fill Container

.image-container {
  width: 300px;
  height: 200px;
  border: 2px solid #333;
}

.image-fill {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

Result: Image stretches to fill entire container, may distort.

contain — Fit Inside Container

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

Result: Image fits inside container, preserving proportions. May have empty areas.

cover — Fill with Cropping

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

Result: Image fills entire container, preserving proportions. May be cropped but does not distort.

none — Original Size

.image-none {
  width: 100%;
  height: 100%;
  object-fit: none;
}

Result: Image preserves original size, may be cropped.

scale-down — Scale Down if Needed

.image-scale-down {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

Result: Image behaves like none or contain, choosing smaller size.

Visual Comparison

<div class="gallery">
  <div class="image-box">
    <img src="photo.jpg" class="img-fill" alt="Fill">
    <p>fill</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-contain" alt="Contain">
    <p>contain</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-cover" alt="Cover">
    <p>cover</p>
  </div>
  <div class="image-box">
    <img src="photo.jpg" class="img-none" alt="None">
    <p>none</p>
  </div>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.image-box {
  width: 200px;
  height: 150px;
  border: 2px solid #ddd;
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
}

.img-fill { object-fit: fill; }
.img-contain { object-fit: contain; }
.img-cover { object-fit: cover; }
.img-none { object-fit: none; }

Object-position

object-position determines the position of content inside the container (similar to background-position).

object-position Values

/* Keywords */
object-position: center;      /* default */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: top left;
object-position: bottom right;

/* Percentages */
object-position: 50% 50%;     /* center */
object-position: 0% 0%;       /* top left corner */
object-position: 100% 100%;   /* bottom right corner */

/* Pixels */
object-position: 20px 30px;

Examples with object-position

/* Focus on person's face */
.portrait {
  object-fit: cover;
  object-position: center top;
}

/* Focus on right part of image */
.focus-right {
  object-fit: cover;
  object-position: right center;
}

/* Custom position */
.custom-position {
  object-fit: cover;
  object-position: 30% 70%;
}

Practical Examples

Product Card

<div class="product-card">
  <div class="product-image">
    <img src="product.jpg" alt="Product">
  </div>
  <div class="product-info">
    <h3>Product Name</h3>
    <p>Product description</p>
  </div>
</div>

.product-card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
}

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

User Avatar

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.gallery-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s;
}

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

Working with Video

object-fit also works with <video> elements:

<video class="video-player" controls>
  <source src="video.mp4" type="video/mp4">
</video>

.video-player {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

Compatibility with aspect-ratio

object-fit works great together with aspect-ratio:

.image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

Browser Support

object-fit and object-position are supported in all modern browsers:

  • Chrome 31+
  • Firefox 36+
  • Safari 7.1+
  • Edge 16+

For older IE versions, you can use a polyfill or fallback.

Tip:

Use object-fit: cover to create beautiful cards and galleries where images should fill the container without distortion. Combine with object-position to control image focus.