Layouts

Object Fit

Utilities for sets how the content of a replaced element (img or video tag) should be resized.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
object-contain	object-fit: contain
object-cover	object-fit: cover
object-fill	object-fit: fill
object-none	object-fit: none
object-scale-down	object-fit: scale-down

Usage

Set object-fit for image.

object-cover

object-fill

object-scale-down

object-none

<img class="object-none ... width-32 height-48" src="...">

HTML

.dummy {
  @extend
    .object-none,
    .width-32,
    .height-48;
}

SCSS

Set object-fit for video.

object-cover

object-fill

<video class="object-cover ... width-64 height-40" controls>
  <source src="..." type="video/mp4">
</video>

HTML

video {
  @extend
    .object-cover,
    .width-64,
    .height-40;
}

SCSS