html - 横向和纵向图像进入引导轮播 : height and width in responsive layout

Question

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

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

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

Answer 1

您需要做的是 - 在启动时和 window.resize - 迭代每个图像并设置所需的高度，这通常是幻灯片/画廊中第一张图像的高度。这是我为我的最爱写的一个例子。 slider BX- slider :

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);
    })

}