Object Fit

Control how images and video media fit inside fixed frames.

Overview

Use object-fit utilities on images or videos once the container has a known frame. The bundled set matches Tailwind-style naming: object-contain, object-cover, object-fill, object-none, and object-scale-down, with responsive --on-* variants where structural utilities support them.

Class	CSS	Usage
.object-contain	object-fit: contain;	Scale to fit inside the frame; whole asset visible
.object-cover	object-fit: cover;	Fill the frame; crop if aspect ratios differ
.object-fill	object-fit: fill;	Stretch to fill width and height (may distort)
.object-none	object-fit: none;	Ignore the box; use intrinsic size (often with width/height)
.object-scale-down	object-fit: scale-down;	Like contain or none, whichever yields a smaller size

Object Cover

Use .object-cover when the frame matters more than seeing every edge of the image. The image fills the entire container and crops anything that doesn’t fit.

<div class="elementor-element overflow-hidden rounded" style="width: 18rem; height: 10rem;">
  <img alt="Cover image" class="width-full height-full object-cover" src="image.jpg"/>
</div>

Object Contain

Use .object-contain when the whole image or logo needs to stay visible. The image scales to fit inside the container without cropping.

<div class="elementor-element border-1 border-solid border-gray rounded" style="width: 18rem; height: 10rem;">
  <img alt="Contain image" class="width-full height-full object-contain" src="image.jpg"/>
</div>

Fill and Scale Down

.object-fill stretches the media to the full width and height of the box. .object-scale-down never upscales past the intrinsic size; it behaves like contain or none, whichever results in a smaller rendered size.

Object none

.object-none keeps the replaced element’s default object sizing. Pair it with explicit width, height, or max dimensions when you need precise control.

Best Practices

1. Set the Frame First

   Object-fit only matters once the container has a known width, height, or aspect ratio.

2. Use Cover for Editorial Layouts

   Card art, hero media, and gallery crops usually work best with .object-cover.

3. Use Contain for Product and Brand Assets

   Logos and product images often need .object-contain so nothing important gets cropped.

4. Pair With Overflow Hidden

   Cropped media looks cleaner when the container clips the edges.

Related Utilities

Aspect Ratio

Control container proportions

Overflow

Control clipping and scrolling