Neon DistrictISSUE #17 of 50

object-fit · sizing media

PrismaVSJank the Janitor

Prisma saysobject-fit controls how an <img> or <video> fills its box — cover, contain, fill, none.

When you give a replaced element a fixed width and height, object-fit decides how the media fills it: cover (fill, crop), contain (fit, letterbox), fill (stretch), none (native). It's the image equivalent of background-size — essential for uniform thumbnails.

Power-ups you unlock

object-fit: cover | contain | fill | none
cover crops to fill; contain fits with letterbox
Like background-size, but for <img>/<video>
Key for uniform thumbnail/avatar grids

Jank the Janitor attacks — common mistakes

Stretched (distorted) images from default fill
Forgetting to set both width and height
cover when the whole image must be visible

Boss battleForce differently-sized images into uniform 100×100 thumbnails with object-fit:cover.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>img{width:100px;height:100px;object-fit:cover;border-radius:8px;margin:4px}</style></head><body style="background:#06040d;padding:20px"><img src="https://via.placeholder.com/300x100" alt=""><img src="https://via.placeholder.com/100x300" alt=""></body></html>

▶ Open the interactive comic issue

‹ Shapes · Shape-Outside · Text Wrapping Object-Position · Framing ›