Object Fit

Utilities for controlling how a replaced element's content should be resized.

Class Properties
.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;

Contain

Resize an element's content to stay contained within its container using .object-contain.

Cover

Resize an element's content to cover its container using .object-cover.

Fill

Stretch an element's content to fit its container using .object-fill.

None

Display an element's content at its original size ignoring the container size using .object-none.

Scale down

Display an element's content at its original size but scale it down to fit its container if necessary using .object-scale-down.

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.