CSS Object Fit Property

The object-fit property controls how replaced content (like images and videos) is resized to fit its container.

Object Fit Values

fill (default): Stretches to fill container, may distort.

contain: Scales to fit within container, maintains aspect ratio.

cover: Fills container, maintains aspect ratio, may crop.

none: Uses original size, may overflow.

scale-down: Uses smallest of none or contain.

/* Cover - fills container */
.cover {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

/* Contain - fits within */
.contain {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

/* Fill - stretches */
.fill {
  width: 300px;
  height: 300px;
  object-fit: fill;
}

/* Object position */
.positioned {
  object-fit: cover;
  object-position: top right;
}