将风景和肖像图像转换为引导旋转木马：响应布局中的高度和宽度

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做什么来防止宽度缩放，但保持响应缩放和682px的最大高度？

Answer 1

您需要做的是-在启动和窗口。调整大小-迭代每个图像并设置所需的高度，通常是幻灯片/图库中第一个图像的高度。这里是我为我的最爱写的一个例子。滑块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);
    })

}