Object fit

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


Class reference

ClassProperties
object-containobject-fit: contain;
object-coverobject-fit: cover;
object-fillobject-fit: fill;
object-noneobject-fit: none;
object-scale-downobject-fit: scale-down;

# Contain

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

example image
<div class="bg-pink-300 ...">
<img class="object-contain h-48 w-full ...">
</div>

# Cover

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

example image
<div class="bg-teal-300">
<img class="object-cover h-48 w-full ...">
</div>

# Fill

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

example image
<div class="bg-blue-300">
<img class="object-fill h-48 w-full ...">
</div>

# None

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

example image
<div class="bg-violet-300">
<img class="object-none h-48 w-full ...">
</div>

# 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.

example image
<div class="bg-magenta-300">
<img class="object-scale-down h-48 w-full ...">
</div>

# Responsive

To control how a replaced element’s content should be resized only at a specific breakpoint, add a {screen}: prefix to any existing object fit utility. For example, adding the class md:object-scale-down to an element would apply the object-scale-down utility at medium screen sizes and above.

<div>
<img class="object-contain **md:object-scale-down** ..." src="...">
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.