我有很多图像：横向图像为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？
您需要做的是-在启动时和window.resize-迭代每个图像并设置所需的高度，通常这是幻灯片/图库中第一个图像的高度。这是我为我的收藏写的一个例子。滑块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);
})
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句