CSS object-fit: Control How Images Fill a Box
object-fit tells an image how to behave inside a container with a different aspect ratio, preventing distortion. Use it for responsive hero images or product grids. The default is fill, which stretches the image; you almost always want cover or contain.
Why it exists
Before object-fit, developers used clumsy workarounds to control image sizing, like setting an image as a background-image on a div just to access background-size: cover. This was semantically incorrect and bad for accessibility. object-fit brings this powerful control directly to <img> and <video> elements where it belongs.
The mental model
Think of object-fit as the director for how an actor (the image) should appear on stage (the container). Should the actor stretch to fill the stage (fill)? Should the entire actor be visible, even if it leaves parts of the stage empty (contain)? Or should the actor fill the entire stage, even if their feet are cropped out (cover)?
How it works
The property applies to "replaced elements" like <img> and <video> and has five main values. fill is the default; it stretches the content to match the container's dimensions, often causing distortion. contain scales the content to fit inside the box while preserving its aspect ratio, potentially leaving empty space (letterboxing). cover scales the content to fill the entire box while preserving its aspect ratio, potentially cropping parts of the image. none displays the image at its original size. scale-down behaves like none or contain, whichever results in a smaller image.
When to use it
Use object-fit whenever an image's container has a fixed size but the image itself has a variable aspect ratio. This is common for user profile pictures, product gallery thumbnails, and card components. object-fit: cover is a go-to for hero images and uniform grids. object-fit: contain is ideal for logos or diagrams that must be fully visible.
When not to use it
The property has no effect on non-replaced elements like a div or span, nor does it work on <iframe> or <embed> elements. If using cover, be mindful that important details near the edges of an image might be cropped. You can use the companion object-position property to shift the image's focal point within the frame.
One canonical example
To create a grid of 100x100 pixel square avatars from user photos of various sizes, you would style the <img> tag with width: 100px; height: 100px; object-fit: cover;. This forces every image into a square, filling the space by cropping any excess width or height, resulting in a clean, uniform grid without any stretched or squished faces.
Interview question
Which scenario is best suited for using object-fit: contain?
- a.Ensuring a company logo is fully visible within a small icon box.Correct
- b.Stretching a product photo to perfectly match the dimensions of its display box.
- c.Creating a grid of user avatars where faces should fill square containers.
- d.Displaying a hero image that must always fill its banner area.
Why? this is the answer
object-fit: contain scales the content to fit inside the box while preserving its aspect ratio, ensuring the entire image is visible, which is ideal for logos. Options A and C describe use cases for object-fit: cover, while option B describes object-fit: fill.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles