Object Fit

Controls how to resize the content of a replaced element.

Class	Style
`of-c`	`object-fit: cover`
`of-f`	`object-fit: fill`
`of-none`	`object-fit: none`
`of-sd`	`object-fit: scale-down`

Fill

Initial value

The content will stretch to fill the entire container, disregarding its aspect ratio.

<div class="h-40 w-80" id="area">
  <img class="d-full of-f rad-1" src="/img/coast.jpg" />
</div>

Cover

The content will scale to cover the entire container while maintaining its aspect ratio, potentially cropping the content.

<div class="h-40 w-80" id="area">
  <img class="d-full of-c rad-1" src="/img/coast.jpg" />
</div>

None

The content will not be resized to fit the container, and it will retain its original size.

<div class="h-40 w-80" id="area">
  <img class="d-full of-none rad-1" src="/img/coast.jpg" />
</div>

Scale Down

The content will be sized as if none or contain, whichever results in a smaller size.

<div class="h-40 w-80" id="area">
  <img class="d-full of-sd" src="/img/coast.jpg" />
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:of-*, md:of-*, lg:of-*, and xxl:of-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:of-* utility to override elements and change their values when hovering over them.