我正在一个艺术家的网站上工作，所以画廊非常重要。我在网站上使用 Bootstrap，在画廊上使用 Lightbox for Bootstrap 插件。它可以很好地将图像的宽度调整为任何分辨率(我想让它尽可能响应)。但是，正如您可以观察到的，如果您单击任何垂直照片(例如第二行第二列中的照片)，当它打开时，它会比屏幕大，并且如果不滚动就无法看到。
所以，我想摆脱这个问题，将图像的最大高度调整为屏幕的高度。但我找不到方法来做到这一点。有什么想法可以用简单的方式做到这一点吗？我已将网站上传到服务器，以便您可以看到问题:http://mural.uv.es/ivape2/es/galeria.html
谢谢。
最佳答案
我遇到了类似的问题，tinny77's answer这是唯一接近解决方案的事情。
这是我最终得到的工作片段
$().ready(function() {
$('[data-toggle="lightbox"]').click(function(event) {
event.preventDefault();
$(this).ekkoLightbox({
type: 'image',
onContentLoaded: function() {
var container = $('.ekko-lightbox-container');
var image = container.find('img');
var windowHeight = $(window).height();
if(image.height() + 200 > windowHeight) {
image.css('height', windowHeight - 150);
var dialog = container.parents('.modal-dialog');
var padding = parseInt(dialog.find('.modal-body').css('padding'));
dialog.css('max-width', image.width() + padding * 2 + 2);
}
}
});
});
});<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js" type="text/javascript"></script>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/3.3.0/ekko-lightbox.min.js"></script>
</head>
<body>
<p>Click Image</p>
<a href="http://lorempixel.com/400/1920" data-toggle="lightbox">
<img height="200" src="http://lorempixel.com/400/1920"/>
</a>
</body>
</html>关于javascript - 控制 Bootstrap-Lightbox 画廊中的图像高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26875231/