Object Fit

Controls how to resize the content of a replaced element.

Class	Property
of-c	object-fit: cover;
of-f	object-fit: fill;
of-none	object-fit: none;
of-sd	object-fit: scale-down;

---

Using responsive modifiers

Using responsive breakpoints like sm:of-*, md:of-*, lg:of-*, and xxl:of-* allows targeting specific utilities in different viewports.

<div class="of-c md:of-sd ..."></div>

Using hover modifiers

Using :hover modifiers such as h:of-* allows you to override elements and change their values when hovering over them.

<div class="of-c h:of-sd ..."></div>