bootstrap 轮播中的横向和纵向图像：响应式布局中的高度和宽度

Question

我有一些图片：横向图片是1024*682px，纵向图片是685*1024px。正如您想象的那样，将它们混合放入 bootstrap 旋转木马中会导致旋转木马高度随着图像滑动而变化。为了防止这种情况发生并使轮播中的纵向图像居中，我输入了以下 css:

.carousel-inner .item img {
    max-height: 682px;
    height: auto;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

在可视区域大致小于横向图像宽度 (1024px) 之前，这似乎可以正常工作。此时，图像的高度（按比例）保持不变，但会缩放图像的宽度，从而失去纵横比。我需要对 css 做些什么来防止宽度缩放但保持响应缩放和 682px 的最大高度？

Answer 1

您需要做的是 - 在启动时和 window.resize - 迭代每个图像并设置所需的高度，这通常是 slideshow/gallery 中第一张图像的高度。这是我为我的最爱写的一个例子。滑块 BX 滑块：

function resizeslider(){
// the second Li seems to be the first image in the slider, so measure itys height:
     hli= $(".bx-viewport li:nth-child(2)").height();
     //console.log(hli);
     $(".bx-viewport").height(hli)
     $(".bx-viewport img").each(function(){
         $(this).height(hli);
    })

}

bootstrap 轮播中的横向和纵向图像：响应式布局中的高度和宽度

Landscape and portrait images into bootstrap carousel: height and width in responsive layout

html

css

twitter-bootstrap-3