html - 使用 Bootstrap 在模态框内调整轮播大小
问题描述
我目前正在创建我现在的网站,我想要一个包含文本和图像的模式。图像存储在轮播中。
除了图像大小之外,一切都很好。在我的数据库中存储不同大小和方向的图像。当我单击图像时,它会打开一个模式并显示有关图像和图像本身的信息。然而,并非所有图像都适合模态,其中一些图像是失真的。
我不明白我应该如何解决这个问题,我应该在模式中添加 CSS 吗?到旋转木马?
我认为最好的方法应该是在图像不适合模态时减小图像的大小。
这是我的代码:
<div class="modal fade" id="modal-<?php echo $id; ?>" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h5 class="modal-title" id="modalLabel"><?php echo $title; ?></h5>
<div class="mt-5">
<p><?php echo $technique; ?></p>
<p><?php echo $size; ?></p>
<p><?php echo $date; ?> </p>
<p><?php echo $location; ?></p>
</div>
</div>
<div class="col-md-8">
<div class="carousel slide" id="imageCarousel-<?php echo $id ?>"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-slide-to="1"
data-target="#imageCarousel-<?php echo $id ?>"
class="active"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="<?php echo $url ?>"
alt="image slide">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Inquire</button>
</div>
</div>
</div>
</div>
在下面的屏幕截图中,图片应该被更垂直地拉伸。
解决方案
由于另一个堆栈溢出帖子,我通过添加以下内容找到了答案:
.w-100 {
width: 100% !important;
height: 100%;
}
到我的 CSS 样式表 :)
推荐阅读
- css - 对齐 ant 设计表的列和行
- oracle - 更改语句数据类型更新需要很长时间
- azure - 使用 PowerShell 锁定 Azure 资源
- android - 使用导航组件将参数传递给嵌套图的问题
- android - 一段时间后,sockets.io 没有收到任何进一步的发射?
- android - 如果应用程序在前台并收到推送通知,则不打开生物识别提示
- python - 如何在 Python 中查询 AWS CostExplorer API 以获取特定标签的成本?
- github - 更改 Github 存储库名称 - 可能的问题?
- .net - Azure 函数:Microsoft.Azure.WebJobs.Extensions.FunctionMetadataLoader:必须声明至少一个绑定
- microsoft-graph-api - 我如何从 Outlook 中的组联系人中获取成员列表