Bootstrap: IE11: Figure with .img-fluid is not resized

[bentrm]

The fluid image in a figure container is not resized at all making it overflow the content area.

On MacOS with Safari 11.0.2 it looks fine:

On Win 7 with Internet Explorer 11 .0.9600.18015 it looks like this:

Does seem to be somewhat related to display: inline-block on figure as deactivating that property (falling back to 'display: block' makes it look fine on IE11:

There have been related issues (#20970, #21360, #21886, #21888) describing this behavior for older versions of Firefox or which are closed to inactivity. There doesn't seem to be a fix for IE11 (which is a supported version I suppose).

I created a minimal example on JS Bin.

[charlesprescottcollins]

Adding width: 100% to .img-fluid fixes this issue in IE11

[jonathangreco]

easy pick

[Geshtu]

.img-responsive has the max-width:100%; display:block; and height:auto; styling. I wonder if the 'Reponsive Images' section on https://getbootstrap.com/docs/4.0/content/images/ should be updated from .img-fluid to .img-responsive?

[XhmikosR]

Fixed in #30809.