Html 使用Bootstrap调整模式内的旋转木马大小
我目前正在创建我的now网站,我希望有一个包含文本和图像的模式。图像存储在旋转木马中 除了图像大小外,其他一切都很好。 在我的数据库中存储不同大小和方向的图像。 当我点击一个图像时,它会打开一个模式并显示关于图像和图像本身的信息。然而,并不是所有的图像都符合模式,有些图像是失真的 我不明白我应该如何解决这个问题,我应该向模式添加CSS吗?去旋转木马 我认为最好的方法应该是减少图像的大小,如果它不能适应模态 这是我的密码:Html 使用Bootstrap调整模式内的旋转木马大小,html,css,bootstrap-4,bootstrap-modal,Html,Css,Bootstrap 4,Bootstrap Modal,我目前正在创建我的now网站,我希望有一个包含文本和图像的模式。图像存储在旋转木马中 除了图像大小外,其他一切都很好。 在我的数据库中存储不同大小和方向的图像。 当我点击一个图像时,它会打开一个模式并显示关于图像和图像本身的信息。然而,并不是所有的图像都符合模式,有些图像是失真的 我不明白我应该如何解决这个问题,我应该向模式添加CSS吗?去旋转木马 我认为最好的方法应该是减少图像的大小,如果它不能适应模态 这是我的密码: <div class="
<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>
尝试将以下CSS样式添加到类旋转木马幻灯片中:
垂直对齐:中间对齐 多亏了另一篇堆栈溢出帖子,我找到了答案,添加了:
.w-100 {
width: 100% !important;
height: 100%;
}
在我的CSS样式表中:)也许你可以添加一个工作剪贴画,其中一个显示扭曲的图像,另一个显示不扭曲的图像……我试过了,但这并不是我想要的图像