CSS Object Fit
Float wrapped text beside media. object-fit answers a different media question: when an img or video sits inside a fixed-size frame, how should the content fill that frame? Master cover and contain before stretching faces with fill.
An object-fit toolkit
📊 Object-fit at a glance
| Value | Everyday job |
|---|---|
fill |
Stretch to the box — may distort aspect ratio |
contain |
Fit entire media inside; may leave empty bands |
cover |
Fill the box; may crop edges |
none |
Keep intrinsic size; may overflow or leave gaps |
scale-down |
Like none or contain — whichever is smaller |
object-position |
Aims which part stays visible when cropping/fitting |
object-fit only shines when the replaced element has a definite width and height (or both axes constrained). A free-flowing image with auto height has nothing to “fit into.”
Cover — fill the frame, allow crop
Cards and hero thumbs often want every pixel of the box filled. cover scales up and crops overflow. Pair a square box with cover for tidy grids.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — show the whole picture
Product shots and diagrams often must stay fully visible. contain letterboxes if aspect ratios differ — better a band than a chopped logo.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill stretches — use with care
fill forces the media to the box size even if proportions warp. Fine for abstract textures; risky for faces, logos, and charts.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position aims the crop
When cover crops, the default center may hide a face or logo. Nudge with object-position — percentages or keywords like top and left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
A calm object-fit habit
Use real <img> / <video> with object-fit for meaningful media. Use background-size when the image is decorative chrome. Size the box first, pick cover or contain, then fine-tune position.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Try it yourself
- Give an image fixed width and height, then try
covervscontain. - Build a circular avatar with
coverand shiftobject-position. - Apply
fillonce and notice distortion — then switch back. - Compare the same crop as a CSS
background-size: coverdecoration. - Write one sentence: when is contain safer than cover?
Common mistakes
- Expecting
object-fitto work without a sized box - Using
fillon portraits and logos - Confusing this lesson with float wrap or position offsets
- Putting meaningful photos only in
background-image(harder for alt text) - Forgetting
object-positionwhen cover hides the subject
Summary
object-fitfits replaced media into a sized framecoverfills and may crop;containshows all and may letterboxfillcan distort — use sparinglyobject-positionaims the visible region- Prefer object-fit for content media; background-size for decoration
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top