Combining CSS aspect-ratio and object-fit to scale an image into a container like a background image

This will center and scale an image to cover a container of a fixed aspect ratio.

Markup:

<figure>
    
</figure>

CSS:

figure {
    /* fix the aspect ratio and size of the container */
    aspect-ratio: 1.78/1;
    height: 200px;
    width: 100%;
    overflow: hidden;

    /* center the image in the container */
    display: flex;
    align-items: center;
    justify-content: center;
}

img {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}

Feedback?

Email us at enquiries@kinsa.cc.