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">×</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
添加display:flex
flex-shrink-1 w-auto mx-auto
在模态内容上添加flex-shrink:1;width:auto
然后是一个自定义类来重置最大宽度:
.modal-custom {
max-width: inherit;
}
https://codeply.com/p/BuCU19i1mH/
<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">×</span>
</button>
</div>
<div class="modal-body" id="dynamic-content">
<img src="..." class="img-fluid" alt="Family Tree Image 1" />
</div>
</div>
</div>
</div>
推荐阅读
- django - 计算 Django 中 JSONField 内的对象列表
- webots - 车模动力学如何融入webbots
- eclipse - 如何将自定义编辑器视图中显示的 Nattable 中的选择链接到 Eclipse 中的天狼星属性视图?
- r - 使用 Kumquat gem 渲染 Rails .Rmd 文件 - .Rdata 未加载
- python - python在尝试加载spacy时抛出一些错误
- ios - 有条件地导航到swiftui中的新视图
- angular - 使用 Ionic V4 固定通知图标
- php - 在 php 中使用牛津词典 API 时出错
- html - 不同条件的ngclass
- angular - NativeScript - 如何在调试时查看应用程序设置的内容?