- Layout
- object-fit
Layout
object-fit
Utilities for controlling how a replaced element's content should be resized.
| Class | Styles |
|---|---|
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; |
Examples
Resizing to cover a container
Use the object-cover utility to resize an element's content to cover its container:
<div class="bg-indigo-300 ..."> <img class="h-48 w-96 object-cover ..." /></div>Containing an element
Use the object-contain utility to resize an element's content to stay contained within its container:
<div class="bg-purple-300 ..."> <img class="h-48 w-96 object-contain ..." /></div>Stretching to fit a container
Use the object-fill utility to stretch an element's content to fit its container:
<div class="bg-sky-300 ..."> <img class="h-48 w-96 object-fill ..." /></div>Scaling down if too large
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:
<div class="bg-cyan-300"> <img class="h-48 w-96 object-scale-down ..." /></div>Using an element's original size
Use the object-none utility to display an element's content at its original size ignoring the container size:
<div class="bg-yellow-300"> <img class="h-48 w-96 object-none ..." /></div>Responsive design
Prefix an object-fit utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="object-contain md:object-scale-down"> <!-- ... --></div>Learn more about using variants in the variants documentation.
