Bootstrap 4 增加模式屏幕上的图像大小

引导上的模式屏幕未显示完整图像大小

我尝试过在css中更改模式大小，但没有效果

<div class="modal fade bd-example-modal-lg show" id="ftl1Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="~/Content/Images/FamilyTrees/FamilyTreeLarge_1.png" class="img-fluid" alt="Family Tree Image 1" />
            </div>
        </div>
    </div>
</div>

<div class="col-lg-3 col-md-4 col-6">
            <a href="#ftl1Modal" role="button" class="d-block mb-4 h-100" data-toggle="modal">
                <img src="~/Content/Images/FamilyTrees/FamilyTreeThumb_1.png" class="img-fluid" alt="Family Tree Image 1" />
            </a>
</div>

&时代；

我希望当我点击缩略图像时，它会以真实的宽度和高度显示图像，还有其他方法可以实现吗

---

感谢您一如既往的帮助。

您可以像这样使模式适合图像宽度

• 在模态对话框中，为

  显示添加
  d-flex
  ：flex

• 在模态内容中，为

  flex-shrink:1添加
  flex-shrink-1 w-auto-mx-auto
  ；宽度：自动

然后使用自定义类重置最大宽度：

.modal-custom {
    max-width: inherit;
}

&时代；

<div class="modal fade show" id="ftl1Modal" role="dialog">
    <div class="modal-dialog d-flex modal-custom">
        <div class="modal-content flex-shrink-1 w-auto mx-auto">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="dynamic-content">
                <img src="..." class="img-fluid" alt="Family Tree Image 1" />
            </div>
        </div>
    </div>
</div>