时间戳

首页 > 解决方案 > 避免出现 Bootstrap 灯箱滚动条

javascript - 避免出现 Bootstrap 灯箱滚动条

问题描述

我正在使用 Ashley White 的Bootstrap Lightbox代码。

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
    event.preventDefault();
    $(this).ekkoLightbox();
});
<!-- css -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">

<!-- HTML -->

<a href="https://i.scdn.co/image/ab67616d0000b273528034c2cfe590178ac6657a" data-toggle="lightbox" data-title="Instrument Soundtrack by Fugazi">
    <img src="https://unsplash.it/250.jpg?image=250" class="img-fluid">
</a>

<!-- javascript -->

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>

出于某种原因，当我单击较小的图像打开灯箱图像时，模态窗口包含滚动条。

我已经查看了文档，并且还测试了通过data-max-width="250"例如设置最大值，但这样做仍然会导致滚动条可见。

我想知道是否有一种方法可以在不出现滚动条的情况下使图像适合？

标签： javascripthtmlcss

解决方案

推荐阅读