Border at bottom of image when using object-fit:cover

Putting this here to help my future self and anyone else.

When using object-fit:cover on an image inside a wrapper to fit to size, sometimes there is a gap/border at the bottom of the image.

You have to apply display:block to the image so it stops being in-line and removes the gap:

.image-wrapper {
    overflow: hidden;
    object-fit: cover;
    img {
        display: block;
    }
}