object-fit

---

The object-fit property determines how an image or video should be sized to fit its container. This is similar to how the background-size property controls how background images are displayed.

{ object-fit: cover }

Fills the entire area from edge to edge, cropping the image where it overlaps the container.

{ object-fit: contain }

Displays the entire image, uncropped. This will typically leave space between the image and its container on two of the sides unless the image and container share the exact same size.

Use Case

Applying a uniform style to three images of different sizes and aspect ratios.