Object fit

Overview

object-fit utilities set the CSS object-fit property on replaced elements such as <img> and <video>, controlling how the content is scaled to fit the container. Available values:

• contain
• cover
• fill
• scale (for scale-down)
• none

Examples

The object-fit-{value} class is applied directly to the replaced element:

HTML

<img src="..." class="object-fit-contain border rounded" alt="...">
<img src="..." class="object-fit-cover border rounded" alt="...">
<img src="..." class="object-fit-fill border rounded" alt="...">
<img src="..." class="object-fit-scale border rounded" alt="...">
<img src="..." class="object-fit-none border rounded" alt="...">

Responsive

Responsive variants follow the format .{breakpoint}:object-fit-{value} and activate at the specified breakpoint and above:

HTML

<img src="..." class="small:object-fit-contain border rounded" alt="...">
<img src="..." class="medium:object-fit-contain border rounded" alt="...">
<img src="..." class="large:object-fit-contain border rounded" alt="...">
<img src="..." class="xlarge:object-fit-contain border rounded" alt="...">
<img src="..." class="2xlarge:object-fit-contain border rounded" alt="...">

Video

The same utilities apply to <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>

CSS

Object fit utilities are generated via the utilities API.

Reference

The table lists all object fit utilities and their CSS properties.

Utilities API

Object fit utilities are declared in scss/utilities/_index.scss using the utilities API.

"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),