Object Fit

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

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 stripes w-80">
  <img class="dim-full of-c rad-1" src="https://picsum.photos/400/300?image=10" />
</div>

Fill

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 stripes w-80">
  <img class="dim-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 stripes w-80">
  <img class="dim-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 stripes w-80">
  <img class="dim-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 modifiers

You can combine 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>

Hover modifiers

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

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