CSS object-fit and aspect ratio: crop a preview without distorting it

How the rule works

A case index displays small receipt scans with inconsistent source dimensions. A fixed ratio and cover fit keep the card grid stable, but the crop can hide a signature or amount. Use the crop only for a navigational thumbnail; the detail page must expose the full evidence. If every pixel matters on the card, contain is safer and may leave letterboxing. Supply width and height attributes in HTML when known, and write alternate text from the image's function. CSS changes the crop, not the bytes transferred or the accessibility text.

.receipt-card__thumb { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.receipt-detail__scan { max-inline-size: 100%; block-size: auto; object-fit: contain; }

Cost and verification

Cropping does not reduce download size. Serve an appropriately sized thumbnail asset or responsive source set when the original scan is large. Test cards with portrait, landscape, and unexpectedly small images, and confirm the full record remains reachable. An aspect-ratio placeholder can reduce layout movement while data loads, but it cannot fix a source file with the wrong orientation.

Common Mistakes

• Do not use cover on evidence when the cropped part may change the decision.
• Do not treat object-fit as image compression.
• Do not remove meaningful alternate text because the crop looks clear.

Connected lessons

• CSS Type and Media
• CSS grid tracks: reserve a sidebar without letting content widen the page
• HTML srcset and sizes: let the browser choose an appropriately sized image
• HTML image alt text: describe function or information, not pixels alone

Property decisions

• CSS aspect-ratio: reserve a stable box without fixing both dimensions

Further interaction details

• CSS object-position: move a thumbnail crop without changing the evidence

Further rendering decisions

• CSS image-rendering: preserve a pixel map's hard edges