Object fit
Use the object fit utilities to modify how the content of a replaced element, such as an <img>
or <video>
, should be resized to fit its container.
How it works
Change the value of the object-fit
property with our responsive object-fit
utility classes. This property tells the content 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.
Classes for the value of object-fit
are named using the format .object-fit-{value}
. Choose from the following values:
contain
cover
fill
scale
(for scale-down)none
Examples
Add the object-fit-{value}
class to the replaced element:
<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">
Responsive
Responsive variations also exist for each object-fit
value using the format .object-fit-{breakpoint}-{value}
, for the following breakpoint abbreviations: sm
, md
, lg
, xl
, and xxl
. Classes can be combined for various effects as you need.
<img src="..." class="object-fit-sm-contain border rounded" alt="...">
<img src="..." class="object-fit-md-contain border rounded" alt="...">
<img src="..." class="object-fit-lg-contain border rounded" alt="...">
<img src="..." class="object-fit-xl-contain border rounded" alt="...">
<img src="..." class="object-fit-xxl-contain border rounded" alt="...">
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>
CSS
Sass utilities API
Object fit utilities are declared in our utilities API in scss/_utilities.scss
. Learn how to use the utilities API.
"object-fit": (
responsive: true,
property: object-fit,
values: (
contain: contain,
cover: cover,
fill: fill,
scale: scale-down,
none: none,
)
),