Object Fit

@include('_partials.class-table', [ 'rows' => [ [ '.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;', ], ] ])

Contain

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Cover

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Fill

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

None

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

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

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.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

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.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

Customizing

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'object-fit', 'property' => 'objectFit', ], 'variants' => ['responsive'], ])