Sections
Object fit
Atomic classes that control the sizing of an img or video relative to its container.
Classes
Section titled Classes| Class | Output | Definition |
|---|---|---|
.of-contain |
object-fit: contain |
Fit the content to the content box while preserving its aspect ratio. This may result in empty space in the content box. |
.of-cover |
object-fit: cover |
Cover the entire content box with the content while preserving its aspect ratio. This may crop the content. |
.of-fill |
object-fit: fill |
Stretch and scale the content’s dimensions to match its content box. This is the default browser value. |
.of-none |
object-fit: none |
Prevent the content from being resized. |
.of-scale-down |
object-fit: scale-down |
When larger than the content box, resize the content to fill its content box. Otherwise, maintain the content’s original dimensions. |
.op-center |
object-position: center |
Center the content within its content box. |
Examples
Section titled Examples<img class="of-contain" src="…" />
<img class="of-cover" src="…" />
<img class="of-fill" src="…" />
<img class="of-none" src="…" />
<img class="of-scale-down" src="…" />
<img class="of-none op-center" src="…" />.of-contain
.of-cover
.of-fill
.of-none
.of-scale-down
.op-center.of-none
