css - Internet Explorer 中 bootstrap 4 的 img-fluid 问题

Question

IE 中 bootstrap 4 的 img-fluid 存在问题。 我在 bootstrap 4 的模型对话框中显示图像。图像的实际大小为 2000*400。

但我在 bootstrap 4 的模式弹出窗口中显示图像并且图像具有类 "img-fluid" 因此它被调整为大小 734*148 和额外空间在模式弹出窗口的末尾出现。

如果我添加尺寸小于 734*148 的图像，则不会出现额外空间，这意味着大尺寸图像存在问题。

如果我删除大尺寸图像的 img-fluid 类，则不会出现额外的空间，但图像会显示在模态对话框之外，这是我不想要的。

多余的空间仅出现在 Internet Explorer 中，而不会出现在 firefox 和 chrome 中。

我试图通过向图像的父元素添加 d-block, w-100, h-100 类来解决这个问题，但它不起作用。

那么有什么解决办法吗？

额外空间屏幕截图:

无图像弹出:

Answer 1

如果您使用的是模态框，请将overflow: hidden 添加到模态主体的样式中。

<div class="modal-body" style="overflow: hidden">

并且一定要使用模态页眉和页脚。当然，将它添加到您正在创建的 css、scss 或其他样式文件中的类中；)

请注意，这将不再显示滚动条!但如果您只需要显示图像，这应该可以解决问题。