Html 如何使用多个图像制作引导缩略图滑块。。。。？

我想在我的页面中创建图像滑块。我尝试了以下操作，但效果很好，但如果同时使用横向和纵向图像，则会出现问题…当我单击“下一个箭头”时，旋转木马高度会发生变化，并且当我调整窗口大小时，箭头未正确对齐。。。 演示：

我的代码：

<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-->

---

Bootstrap实现了一个功能，确保图像的自动高度，以便它们在旋转木马中响应。我添加了一些css作为一种解决方案，它可以固定高度，但将宽度留给自动化。这将保持它们的纵横比

这是最新的提琴：

CSS

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