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

Edit on GitHub