Question

我想在我的页面中制作图像滑块。我尝试了以下，但它工作得很好但是如果同时使用横向和纵向图像有问题...当我点击下一个箭头轮播高度变化时，当我调整窗口时箭头没有正确对齐... 演示：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作为修复高度的解决方法，但是使宽度自动化。这保持了它们的宽高比。

这是一个更新的小提琴：jsFiddle

<强> CSS

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

如何使用多个图像制作bootstrap缩略图....

1 个答案: