`object-fit` and `object-position`¶

The object-fit property defines how content like images or videos are resized to fit their container.

1. `object-fit`¶

img {
  object-fit: value;
}

Value	Description
`fill`	Default. Stretches to fill container — may distort aspect ratio.
`contain`	Fits inside container without cropping — maintains aspect ratio.
`cover`	Fills entire container — may crop, maintains aspect ratio.
`none`	Image keeps original size — no resize.
`scale-down`	Chooses the smaller result of `none` or `contain`.

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Result: The image fills the 300×200 box, cropped if necessary.

Controls alignment of the image inside its box when object-fit ≠ fill.

img {
  object-position: center top;
}

img {
  object-fit: cover;
  object-position: top;
}

Result: Image fills the container, cropping from the bottom if needed.

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
}