CSS object-fit & object-position – Interactive Guide & Examples

What are `object-fit` & `object-position`?

object-fit and object-position are CSS properties that control how replaced elements (like <img> and <video>) are resized and positioned within their containers. They are especially useful for responsive layouts, galleries, and media cards.

object-fit: Defines how the content should be resized to fit its container. Common values:
- fill (default): Stretches to fill the box, may distort.
- contain: Scales to fit, preserving aspect ratio (may leave empty space).
- cover: Scales to cover the box, cropping if needed.
- none: No resizing, uses image's original size.
- scale-down: Like none or contain, whichever is smaller.
object-position: Specifies the alignment of the content inside the box (e.g., center, top right, 50% 100%).

Why use them? They provide a simple, CSS-only way to create beautiful, responsive image and video layouts without extra markup or JavaScript.

Interactive Examples

object-fit: cover

.fit-cover {
  object-fit: cover;
}

object-fit: contain

.fit-contain {
  object-fit: contain;
}

object-fit: none

.fit-none {
  object-fit: none;
}

object-fit: cover + object-position: top right

.fit-cover-pos {
  object-fit: cover;
  object-position: top right;
}

What are object-fit & object-position?