Object fit
Atomic classes that control the sizing of an img or video relative to its container.
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
<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