Media

Utilities for Media

# Object Fit

Class name	Style
.object-fit	object-fit: contain
.object-cover	object-fit: cover
.object-fill	object-fit: fill
.object-scale-down	object-fit: scale-down
.object-none	object-fit: none

Contain

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

        
<div class="bg-grey-400">
  <img class="object-contain h-13 w-full ...">
</div>

Cover

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

        
<div class="bg-grey-400">
  <img class="object-cover h-13 w-full ...">
</div>

Fill

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

        
<div class="bg-grey-400">
  <img class="object-fill h-13 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-grey-400">
  <img class="object-scale-down h-13 w-full ...">
</div>

# Object Align

Class name	Style
.object-center	object-position: center
.object-left	object-position: left
.object-right	object-position: right

Use the .object-{side} utilities to specify how a replaced element’s content should be positioned within its container.

.object-left

.object-center

.object-right

        
<img class="bg-grey-400 w-full h-10 object-left object-none" src="/images/duck-small.jpg">
<img class="bg-grey-400 w-full h-10 object-center object-none" src="/images/duck-small.jpg">
<img class="bg-grey-400 w-full h-10 object-right object-none" src="/images/duck-small.jpg">

# Variables

// 7. Media
// ==========================================================================

$object-fits: contain, cover, fill, scale-down, none;
$object-aligns: center, left, right;

$media-variants: ();