Object Fit

Utility	Properties
Error: 429

Cover

This example sets the object fit to 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="https://picsum.photos/400/300?image=10" />
</div>

Fill

Initial value

This example sets the object fit to fill. 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="https://picsum.photos/400/300?image=10" />
</div>

None

This example sets the object fit to 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="https://picsum.photos/400/300?image=10" />
</div>

Scale Down

This example sets the object fit to 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="https://picsum.photos/400/300?image=10" />
</div>

Conditional styles

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

Media modifier

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

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

Hover modifier

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

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