object-fit

The CSS property that says how a replaced element — an <img>, a <video> — fits the box it is given when their ratios differ: cover fills the box and crops, contain shows all of it and letterboxes, fill stretches, none keeps the intrinsic size; object-position says which part to keep when cropping

The pair to aspect-ratio: the box has a shape, the image has another, and this decides who wins. cover is the card and hero default (a face is kept by object-position: top); contain is for logos and diagrams that must not be cropped. Before it, cropping meant a wrapper with overflow: hidden and a positioned image, or background-image on a <div> and the loss of the <img> element’s alt text and lazy loading. The resource card’s cover is object-cover in Tailwind’s spelling.