Briefle words · UI design
Object-fit: cover
Also called crop to fill
A CSS setting that scales an image to completely fill its frame and trims the overflow, instead of distorting or letterboxing it.
Say it to an AI
Row of three rental listing cards (photo, title, rating, price). Crop every photo to the same 4:3 aspect ratio with object-fit: cover, never stretched and no letterboxing, so titles, ratings and prices keep baseline alignment across cards.
How an expert would brief the stronger version of “Rental listing cards”.
See it
Try it as a puzzle →Row of recommended stays on a vacation-rental home page.
Why: B's photos fill their frames edge to edge. A's third photo is shrunk to fit ('contain'), leaving grey bars on both sides.
Related words
Room 5 · Spacing & layout
Learn “Object-fit: cover” in a five-minute lesson