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:

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

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:

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.