Object fit utilities

Notation #

The object-fit property tells the content of replaced elements (opens in new tab) to fill the parent container in a variety of ways, such as preserving the aspect ratio or stretching to take up as much space as possible. The class names for these utilities come in the following formats:

• .object-fit-{value}
• .object-fit-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

Examples #

The classes are shown in action below. They are added directly to the replaced elements (opens in new tab), such as <img> or <video>. It's worth noting again that you can add the {breakpoint} to make these utilities responsive.

.object-fit-contain

.object-fit-cover

.object-fit-fill

.object-fit-scale

.object-fit-none

<img src="..." alt="..." class="object-fit-contain" width="200" height="150">
<img src="..." alt="..." class="object-fit-cover" width="200" height="150">
<img src="..." alt="..." class="object-fit-fill" width="200" height="150">
<img src="..." alt="..." class="object-fit-scale" width="200" height="150">
<img src="..." alt="..." class="object-fit-none" width="200" height="150">

Video #

The .object-fit-{value} and responsive .object-fit-{breakpoint}-{value} utilities also work on <video> elements.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>