html - 如何制作具有多个图像的 Bootstrap 缩略图 slider ....？

Question

我想在我的页面中制作图像 slider 。我尝试了以下但效果很好但如果同时使用横向和纵向图像会出现问题...当我单击下一个箭头轮播高度变化时以及当我调整窗口大小时该箭头未正确对齐...演示:Fiddle

我的代码:

<div class="container-fluid" style="margin-left:5px;">
<div class="well" style="border:1px solid grey;background: transparent;">
    <div id="myCarousel_Scroller" class="carousel slide">
        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/150x100" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/150x100" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/150x100" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/150x100" alt="Image" class="img-responsive">
                        </a>
                    </div>
                </div>
                <!--/row-->
            </div>
            <!--/item-->
            <div class="item">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/100x150" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/100x150" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/100x150" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/100x150" alt="Image" class="img-responsive">
                        </a>
                    </div>
                </div>
                <!--/row-->
            </div>
            <!--/item-->
            <div class="item">
                <div class="row">
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/100x150" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/150x100" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/100x150" alt="Image" class="img-responsive">
                        </a>
                    </div>
                    <div class="col-md-3 col-xs-3">
                        <a href="#x" class="thumbnail">
                            <img src="http://placehold.it/150x100" alt="Image" class="img-responsive">
                        </a>
                    </div>
                </div>
                <!--/row-->
            </div>
            <!--/item-->
        </div>
        <!--/carousel-inner--> 
        <a class="left carousel-control center-block" href="#myCarousel_Scroller" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control center-block" href="#myCarousel_Scroller" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
    <!--/myCarousel-->
</div>
<!--/well-->

Answer 1

Bootstrap 实现了一项功能，可确保图像的自动高度，以便它们在轮播中响应。我添加了一些 css 作为变通方法来固定高度但让宽度自动化。这样可以保持它们的纵横比。

这是一个更新的 fiddle :jsFiddle

CSS

.carousel-inner img {
    height: 100px;
    max-height: 100px;
    width: auto;
}
.carousel-inner {
    max-height: 110px;
}