CSS Object-fit Property

The object-fit CSS property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.
CSS Object-fit property from Mozilla MDN.

Usage

Create a container element with a predetermined size or aspect ratio, put the image inside the container, then use object-fit to adjust the image to the container.

img[src="photo.jpg"]

.object-fit-fill

.object-fit-contain

.object-fit-cover

.object-fit-scale-down

img[src="vector.svg"]

.object-fit-fill

☝️ Requires preserveAspectRatio="none"

.object-fit-contain

.object-fit-cover

.object-fit-scale-down

☝️ Chrome will force intrinsic img element height (150px) regardless of svg height

picture > source[srcset="svg"]

.object-fit-fill

☝️ Requires preserveAspectRatio="none"

.object-fit-contain

.object-fit-cover

.object-fit-scale-down

svg > image (no CSS)

svg[preserveAspectRatio="<value>"]

none

xMidYMid meet

xMidYMid slice

?

Equivalent of scale-down ?

svg (inline)

svg[preserveAspectRatio="<value>"]

none

xMidYMid meet

xMidYMid slice

?

Equivalent of scale-down ?

video

.object-fit-fill

.object-fit-contain

.object-fit-cover

.object-fit-scale-down

iframe

.object-fit-fill

.object-fit-contain

.object-fit-cover

.object-fit-scale-down

embed

.object-fit-fill

.object-fit-contain

.object-fit-cover

.object-fit-scale-down