object-fit

Utilities for controlling how a replaced element

Examples

Resizing to cover

Use the object-cover utility to resize an element's content to cover its container:

Containing within

Use the object-contain utility to resize an element's content to stay contained within its container:

Stretching to fit

Use the object-fill utility to stretch an element's content to fit its container:

Scaling down

Use the object-scale-down utility to display an element's content at its original size but scale it down to fit its container if necessary:

Using the original size

Use the object-none utility to display an element's content at its original size ignoring the container size:

Responsive design