Object Fit

Basic usage

Resizing to cover a container

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

<div className="bg-indigo-300 ...">
  <img className="**object-cover** h-48 w-96 ..." />
</div>

Containing an element

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

<div className="bg-purple-300 ...">
  <img className="**object-contain** h-48 w-96 ..." />
</div>

Stretching to fit a container

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

<div className="bg-sky-300 ...">
  <img className="**object-fill** h-48 w-96 ..." />
</div>

Scaling down if too large

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

<div className="bg-cyan-300">
  <img className="**object-scale-down** h-48 w-96 ..." />
</div>

Using an element's original size

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

<div className="bg-yellow-300">
  <img className="**object-none** h-48 w-96 ..." />
</div>