Bootstrap 4 Carousel and Chrome

Forcing Chrome to display a Bootstrap 4 Carousel correctly.

Bootstrap 4 Carousel and Chrome

Neither bootstrap 4's carousel nor the .img-flex class works properly on Chrome. Instead of flexing the images proportionately it shrinks them widthwise while retaining the original height.

The result looks a bit weird:

Image which is too tall vertically

This is actually fairly simple to fix all you need to do is add object-fit: contain; to the css for .img-flex. Unfortunately that only fixes the image size and doesn't fix the hight of the carousel

The image now has the correct height but the carousel is still too tall.

This is also easy to fix with one line of css. The problem is that the active class is overriding the height, but this is fixed by adding display: block; to .carousel-item.active. Voila:

Carousel with the correct proportions.

Of course, if you want this to work during transitions as well (and you should) then you also need to apply display: block; to .carousel-item-next and .carousel-item-prev.

TL;DR?

Add this CSS and it will work:

.carousel-item.active, .carousel-item-next, .carousel-item-prev {
    display: block;
}

.img-fluid {
    object-fit: contain;
}

None of this should have any impact on other browsers, but it will fix the Chrome display issues.