Object fit utilities

Responsive utility classes which can be used to set the object-fit of replaced elements, such as <img> or <video>, determining how they should be resized to fit their containers.

Notation #

The object-fit property tells the content of replaced elements (opens in new tab) 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. The class names for these utilities come in the following formats:

  • .object-fit-{value}
  • .object-fit-{breakpoint}-{value}

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {value} can be one of the following:

{value} Description
contain Sets object-fit: contain property
cover Sets object-fit: cover property
fill Sets object-fit: fill property
scale Sets object-fit: scale property (for scale-down)
none Sets object-fit: none property

Examples #

The classes are shown in action below. They are added directly to the replaced elements (opens in new tab), such as <img> or <video>. It's worth noting again that you can add the {breakpoint} to make these utilities responsive.

Placeholder image
Placeholder image
Placeholder image
Placeholder image
Placeholder image
<img src="..." alt="..." class="object-fit-contain" width="200" height="150">
<img src="..." alt="..." class="object-fit-cover" width="200" height="150">
<img src="..." alt="..." class="object-fit-fill" width="200" height="150">
<img src="..." alt="..." class="object-fit-scale" width="200" height="150">
<img src="..." alt="..." class="object-fit-none" width="200" height="150">

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>

Up next
Opacity utilities

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.