object-fit ends the background-image hack for photos

Cropping a photo to fill a box without distorting it used to mean a div with a background image, which loses the alt text, the lazy loading and the semantics.

img.thumb {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center 30%;   /* faces sit high */
}

object-position is the part that makes it usable for portraits, where centring cuts off the top of everybody’s head. It is one of the few modern layout features with no IE support at all and no reasonable polyfill, so a site still supporting IE11 needs the image to be readable when it is stretched — usually by leaving the height off and accepting a ragged grid there. Pairing it with aspect-ratio would be the complete answer, and that is still years away.