Detailed explanation
The CSS object-fit property controls how the content of a replaced element, such as an <img> or <video>, is sized within the element’s content box. A replaced element displays content whose rendering is handled outside normal CSS layout, such as an image with intrinsic dimensions and an aspect ratio. object-fit is useful when that content’s proportions differ from the space allocated to it, as happens with profile photos, product thumbnails, and video previews. It lets you choose between preserving the full content, filling the available area, or allowing distortion.
The main values are fill, contain, and cover. The default, fill, scales the content to match both dimensions of the content box, potentially changing its aspect ratio. contain preserves the aspect ratio and makes the entire image or video visible, leaving unused space when the proportions differ. cover also preserves the aspect ratio, but scales the content until the box is completely covered, clipping the excess. Two additional values are none, which uses the content’s intrinsic size without scaling to fit, and scale-down, which chooses whichever produces a smaller concrete object size: none or contain.
For example, .avatar { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; } creates a square image element whose content fills the square without distortion; border-radius then gives it a circular appearance. A wide source image loses some content at its sides. By default, the content is centred, but object-position can adjust its alignment, such as object-position: center top. Importantly, object-fit changes the rendering of the content, not the element’s dimensions or its layout footprint.
Interviewers usually look for a clear distinction between sizing the element and fitting its content. Apply object-fit to the image or video itself, not its wrapper, and establish an appropriate content-box size using dimensions, constraints, or aspect-ratio. With width: 100% and height: auto, an image usually retains its natural proportions, so there may be no visible fitting difference. Also distinguish object-fit from background-size: the former controls replaced content, while the latter controls CSS background images.
Key points to remember
- object-fit controls replaced content inside the element’s own content box.
- cover preserves aspect ratio and fills the box, clipping excess content.
- contain preserves aspect ratio and shows all content, potentially leaving unused space.
- fill is the default and can distort content; none avoids fitting, while scale-down chooses the smaller result of none and contain.
- Use object-position to adjust alignment independently of the fitting mode.
Common mistakes candidates make
- Applying object-fit to a wrapper instead of the <img> or <video> element.
- Expecting cover to preserve the entire image, or confusing it with contain.
- Assuming object-fit sets the element’s dimensions or automatically creates a fixed-height crop.
Likely follow-up questions
How does object-position work with object-fit?
object-position controls where the content is aligned within the element’s content box; its default is 50% 50%. With object-fit: cover, using object-position: center top keeps the top aligned while excess content is clipped elsewhere.
What is the difference between object-fit and background-size?
object-fit controls content rendered by a replaced element such as <img>, whereas background-size controls a CSS background image. Use an <img> with appropriate alt text for meaningful image content; backgrounds are generally suitable for decorative visuals.
Why might object-fit: cover appear to do nothing?
If the element’s box already matches the image’s aspect ratio, cover has no excess content to clip. Establish a differently proportioned box, such as width: 100px and height: 100px, to see the fitting behaviour.
Interview tip: Start with the distinction between the element’s box and its content, compare cover with contain, and illustrate the answer with the circular-avatar example.