CSS Object Fit and Object Position

The object-fit property controls how an image fits inside its container. The object-position property controls the position of the image inside the container.

object-fit: cover

Fills the box and may crop the image.

object-fit: contain

Shows the complete image inside the box.

object-fit: fill

Stretches the image to fill the box.

object-position: top

Positions the image toward the top.

Important Properties

object-fit: cover; → Fills the container and may crop the image.
object-fit: contain; → Keeps the complete image visible.
object-fit: fill; → Stretches the image to fit.
object-position: top; → Positions the image at the top.