Skip to main content
Sections

Object fit

Atomic classes that control the sizing of an img or video relative to its container.

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.

<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
placeholder for .of-contain placeholder for .of-contain
.of-cover
placeholder for .of-cover placeholder for .of-cover
.of-fill
placeholder for .of-fill placeholder for .of-fill
.of-none
placeholder for .of-none placeholder for .of-none
.of-scale-down
placeholder for .of-scale-down placeholder for .of-scale-down
.op-center.of-none
placeholder for .op-center.of-none placeholder for .op-center.of-none
Deploys by Netlify