UI-Bootstrap，根据包含的图片调整模态尺寸

Question

我正在使用基于组件的架构，并希望显示 bootstrap 模态，它会根据图像的高度和宽度进行调整。

大多数论坛建议使用百分比形式的高度和宽度，但这不会有帮助，因为图像大小可能会有所不同。

有人做到了吗？

Answer 1

对此有一个简单的解决方案。首先，您需要覆盖模态的 width 属性（高度是自动可调的，应该不是问题），模态 window 使用 .modal-dialog class，所以使用 !importent 覆盖宽度

.modal-dialog {
    width: fit-content !important;
}

content-box 将根据元素包含的内容调整宽度。

here's a demo