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