CSS object-fit

object-fit

The object-fit property controls how replaced elements (like <img> and <video>) are resized to fit their container.

It is especially useful when you have a fixed-size image box (cards, thumbnails, avatars) and you want consistent layout without stretching the image.

Basic pattern (fixed-size image box):

.thumb {
  width: 360px;
  height: 220px;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

Tip: object-fit works only when the element has both width and height (or is constrained by its container).

cover vs contain

cover and contain are the most commonly used values:

• cover – fills the container, keeps aspect ratio, may crop
• contain – fits inside the container, keeps aspect ratio, may leave empty space

cover (best for thumbnails/cards):

.card-img {
  width: 360px;
  height: 220px;
  object-fit: cover;
}

contain (best when you must show the full image):

.preview-img {
  width: 360px;
  height: 220px;
  object-fit: contain;
  background: #f3f4f6; /* helpful if there is empty space */
}

Tip: Combine object-fit with object-position to control which part is cropped when using cover.

Fill / none / scale-down

Other object-fit values:

• fill – stretches to fill the container (may distort)
• none – keeps original size (may overflow)
• scale-down – uses none or contain, whichever is smaller

fill (can distort):

.img-fill {
  width: 360px;
  height: 220px;
  object-fit: fill;
}

none (no scaling):

.img-none {
  width: 360px;
  height: 220px;
  object-fit: none;
}

scale-down (safe fit):

.img-scale-down {
  width: 360px;
  height: 220px;
  object-fit: scale-down;
}

Summary

• object-fit controls how an image/video scales inside its box.
• cover fills the box and may crop; contain shows the full image and may leave space.
• fill can distort; none keeps original size; scale-down chooses the smaller result.