Internet Explorer 中 bootstrap 4 的 img-fluid 问题

Posted 2023-03-06

【中文标题】Internet Explorer 中 bootstrap 4 的 img-fluid 问题

【英文标题】：Issue with img-fluid of bootstrap 4 in Internet Explorer

【发布时间】：2019-07-20 17:56:21

【问题描述】：

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

但我在引导程序 4 的模态弹出窗口中显示图像，并且图像具有类 "img-fluid" 所以它被调整为大小 734*148 和额外的空间在模态弹出窗口的末尾出现。

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

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

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

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

那么有什么解决办法吗？

额外空间屏幕截图：

没有图片的弹出窗口：

【问题讨论】：

您能否添加一个示例截图来演示该问题

我已经用屏幕截图@Mat J 更新了问题

【参考方案1】：

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

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

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

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