Object fit

Class reference

# Contain

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

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

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

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

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

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