Question

首先，我的缩略图库结构如下。

    <div class = "row pictures">
        <div class="col-center col-xs-6 col-sm-4 col-lg-3">
            <a href="#lightbox" data-toggle="modal" data-slide-to="1">
                 <img class="col-center img-responsive thumbnail" src="" >
            </a>
        </div>

        <!-- some more pictures with different "data-slide-to" attributes --> 
   </div>

模式的代码，位于文档末尾，如下所示：

<div class="modal fade and carousel slide" id="lightbox" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">         
            <div class="modal-body">
                <ol class="carousel-indicators">
                    <li data-target="#lightbox" data-slide-to="1" class="active"></li>
                    <li data-target="#lightbox" data-slide-to="2"></li>
                    <!-- some more li elements with different "data-slide-to" attributes -->

                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="" alt="First slide" class="img-responsive">
                    </div>
                    <!-- some more items without active class -->
                </div>
                <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#lightbox" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
    </div>
</div>

问题是，这种模式太大了。我尝试使用下面的javascript修复它，但它只适用于Safari。我无法在Firefox和Chrome中找到解决方法。

我使用jQuery 1.11.1和Bootstrap 3.3.2。

<script type="text/javascript">

    $('.pictures a').on("click", function(){
        $('#lightbox').css({

            "margin-top": function () {
                return document.body.scrollTop;
            },
            "max-height": function () {
                return $(window).height();
            },
            "min-height": function () {
                return $(window).height();
            }
        });
    });

</script>

Answer 1

Noob问题。我只需要将Firefox的img元素的max-height设置为100％，将高度设置为100％：P。

Firefox和Chrome中的Bootstrap模态轮播高度问题

1 个答案: