使用 Bootstrap 在模态框内调整轮播大小

Posted 2023-03-06

【中文标题】使用 Bootstrap 在模态框内调整轮播大小

【英文标题】：Adapting carousel size inside a modal using Bootstrap

【发布时间】：2021-05-24 04:39:03

【问题描述】：

我目前正在创建我现在的网站，我想要一个包含文本和图像的模式。图像存储在轮播中。

除了图像大小，一切都很好。 在我的数据库中存储不同大小和方向的图像。 当我单击图像时，它会打开一个模式并显示有关图像和图像本身的信息。然而，并非所有图像都适合模态，其中一些图像失真了。

我不明白我应该如何解决这个问题，我应该在模式中添加 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 ?>"
                                                             >
                                                    </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> 

在下面的屏幕截图中，图片应该被更垂直地拉伸。

【问题讨论】：

也许您可以添加一个这样的图像的工作片段，该图像显示失真，而另一个图像则不...

【参考方案1】：

尝试将以下 CSS 样式添加到类轮播幻灯片中： 垂直对齐：中间；

【讨论】：

我试过了，但这并不是我想要对图像做的事情

【参考方案2】：

感谢另一个堆栈溢出帖子，我通过添加找到了答案：

.w-100 
    width: 100% !important;
    height: 100%;

到我的 CSS 样式表 :)