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:
containcoverfillscale (for scale-down)none
Examples
Add the object-fit-{value} class to the
replaced element:
<img src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+contain" class="object-fit-contain border rounded" alt="..." >
<img src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+cover" class="object-fit-cover border rounded" alt="..." >
<img src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+fill" class="object-fit-fill border rounded" alt="..." >
<img src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+scale" class="object-fit-scale border rounded" alt="..." >
<img src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+none" class="object-fit-none border rounded" alt="..." >
<img src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+contain"
class="object-fit-contain border rounded" alt="..." > <img
src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+cover"
class="object-fit-cover border rounded" alt="..." > <img
src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+fill"
class="object-fit-fill border rounded" alt="..." > <img
src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+scale"
class="object-fit-scale border rounded" alt="..." > <img
src="https://placehold.co/140x120/31343C/EEE?text=Object+fit+none"
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="https://placehold.co/140x120/31343C/EEE?text=Contain+on+sm" class="object-fit-sm-contain border rounded" alt="...">
<img src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+md" class="object-fit-md-contain border rounded" alt="...">
<img src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+lg" class="object-fit-lg-contain border rounded" alt="...">
<img src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+xl" class="object-fit-xl-contain border rounded" alt="...">
<img src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+xxl" class="object-fit-xxl-contain border rounded" alt="...">
<img src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+sm"
class="object-fit-sm-contain border rounded" alt="..."> <img
src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+md"
class="object-fit-md-contain border rounded" alt="..."> <img
src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+lg"
class="object-fit-lg-contain border rounded" alt="..."> <img
src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+xl"
class="object-fit-xl-contain border rounded" alt="..."> <img
src="https://placehold.co/140x120/31343C/EEE?text=Contain+on+xxl"
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>