A grid of product thumbnails, all the same size, while the photos each vendor supplies come in different proportions: left alone, these images stretch or squash to fill their frame, producing distorted faces and crushed objects. object-fit solves that problem in a single word.
It controls how the actual content of an image or a video, an img or video tag, positions itself inside the box its container forces on it, without ever distorting the media's original proportions.
Definition
object-fit tells the content of a replaced element, mainly img and video, how to resize itself to fit inside the box set by width and height, part of CSS sizing. It plays the same role for a media element that background-size plays for a background image set with background-image.
.product-thumbnail {
width: 300px;
height: 200px;
object-fit: cover;
}The main values: cover, contain and fill
| Value | Behavior |
|---|---|
fill | Stretches the image to fill the box, distorting proportions |
contain | Keeps proportions, shows the whole image, leaves empty bars |
cover | Keeps proportions, fills the whole box, crops the overflowing edges |
none | The image's natural size, ignoring the container's box |
cover: the replacement for server-side cropping
cover is by far the most used value on photo grids, avatars or product thumbnails. It scales the image up until it fully fills the container's box, cropping whatever edges spill over, without ever distorting proportions. It has become the modern replacement for cropping that used to happen server-side, image by image, before the file was even sent to the browser.
object-fit works just as well on a video as on an image, which makes it valuable for video preview thumbnails inside a grid, where each clip needs to occupy exactly the same space despite sometimes very different original aspect ratios.
object-position for adjusting the framing
When cover crops a bit too generously, cutting off the top of a face on a profile photo for instance, object-position lets a specific part of the image stay visible, using the same values used to position a background image, like center top or 50% 20%.
.team-avatar {
width: 160px;
height: 160px;
object-fit: cover;
object-position: center top;
}object-fit, getting equal-sized thumbnails out of photos with varying proportions meant manual cropping, image by image, or server-side processing on every upload. object-fit: cover fixes that with a single line of CSS, never touching the original image file at all.object-fit and overflow: two related behaviors
object-fit only governs a media element's internal content, while overflow governs what spills out of an ordinary container made of text or other elements. The two properties often meet on the same interface, a product thumbnail combining object-fit on its image with overflow: hidden on the card wrapping it, for instance.
Frequently asked questions
object-fit work without setting a fixed height on the element?No, without explicit width and height dimensions, the image or video simply keeps its natural size and object-fit has nothing to crop: the property only really matters once the container forces a fixed-size box that differs from the media's actual proportions.
aspect-ratio sets a ratio on the container box itself, while object-fit decides how the content fits inside a box that is already defined: the two combine very well together, aspect-ratio for the frame's shape, object-fit for how the image behaves inside it.
object-fit also apply to a background image set in CSS?No, object-fit only concerns replaced elements like img or video that appear directly in the HTML: for an image placed as a background with background-image, it is the background-size property, using the same cover and contain values, that plays exactly the same role.