Javascript 图像滑块：在保持滑块响应的同时，保持所有图像的高度相等

在my JS图像滑块（Owl转盘）中，图像具有不同的尺寸：

您可以看到，图像高度在旋转木马中变化。如何在保持转盘响应的同时使其保持恒定？我需要的图像，以填补滑块空间在任何时候，因此，一些将不得不通过CSS裁剪不知何故。预期结果如下所示：

---

它可以在css中指定

例如

编辑 以下解决方案使用插件的回调事件根据最小图像高度修改视口/包装器的高度

js

$(document).ready(function () {

    $("#owl-example").owlCarousel({
        afterUpdate: function () {
            updateSize();
        },
        afterInit:function(){
            updateSize();
        }
    });
    function updateSize(){
        var minHeight=parseInt($('.owl-item').eq(0).css('height'));
        $('.owl-item').each(function () {
            var thisHeight = parseInt($(this).css('height'));
            minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
        });
        $('.owl-wrapper-outer').css('height',minHeight+'px');
    }
});

.owl-carousel .owl-item img {
    height:auto;
    width:100%;
    display: block;
}

.owl-carousel .item {
    margin:0px;
}

EDIT2

关于最新的评论，要显示大图像的底部，一种方法是迭代图像，并添加一个与隐藏图像部分相等的负上边距

function updateSize(){
        var minHeight=parseInt($('.owl-item').eq(0).css('height'));
        $('.owl-item').each(function () {
            var thisHeight = parseInt($(this).css('height'));
            minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
        });
        $('.owl-wrapper-outer').css('height',minHeight+'px');

        /*show the bottom part of the cropped images*/
        $('.owl-carousel .owl-item img').each(function(){
            var thisHeight = parseInt($(this).css('height'));
            if(thisHeight>minHeight){
                $(this).css('margin-top',-1*(thisHeight-minHeight)+'px');
            }
        });

    }

函数updateSize（）{
var minHeight=parseInt（$（'.owl item'）.eq（0.css（'height'））；
$（'.owl item'）。每个（函数（）{
var thisHeight=parseInt（$（this.css（'height'））；
最小高度=（最小高度最小高度）{
$（this.css（'margin-top'，-1*（thisHeight-minHeight）+'px'）；
}
});
}

如果您在车内使用带背景图像的div 您可以尝试使用

background size

属性控制背景大小

#header {
 -webkit-background-size:100%;
 -moz-background-size:100%;
  background-size:100%;
  background-position: 0% 0%;
  background: url(http://i47.tinypic.com/2090r3c.jpg) no-repeat;
}

或者，如果使用，则可以根据容器宽度使用

自动调整大小

img {
 height: inherit; 
 max-height: 100%;

---

}希望你能竖起一把小提琴，但是在我的记事本++的顶部，你可以试着把它放在页面底部，看看这对你是否合适

<script>
$(document).on('resize', function(e){
    var OIs = $('.owl-item')
        minHeight = 0;
//reset overflow
OIs.css('overflow', 'visible');

    //cycle through items and add height to array
    for (i==0;i<OIs.length;i++){
        var thisHeight = OIs[i].innerHeight;
        if (thisHeight != undefined && thisHeight != null && thisHeight > 0){
            if (minHeight == 0 ){
                minHeight = thisHeight;
            } else if (thisHeight < minHeight){
                minHeight = thisHeight;
            }               
        }
    }
    //resize containers to smallest height
    OIs.css({'overflow':'hidden', 'height': minHeight + 'px'}       
});
</script>

$（文档）.on（'resize'，函数（e）{
var OIs=$（'.owl项'）
最小高度=0；
//重置溢出
css（'overflow'，'visible'）；
//循环浏览项目并向阵列添加高度
对于（i==0；i=0）{
如果（最小高度==0）{
最小高度=此高度；
}否则如果（此高度<最小高度）{
最小高度=此高度；
}               
}
}
//将容器调整到最小高度
css（{'overflow'：'hidden'，'height'：minHeight+'px'}
});

---

如果它能工作，有更好的方法来写这个，但它会给你一个解决方案的开始

我的图像是动态加载的，这意味着图像名称可能会不时更改，如何保留为背景图像并将正确的图像名称传递到css文件中？

以随机高度显示的幻灯片

HTML:

JS:

---

您可以使用flexbox实现等高。 试试这个：

.owl-stage
   display flex
.owl-item
   flex 0 0 auto

---

因此，所有图像必须具有相同的高度，并排占据所有宽度？正确吗？您可以剪切图像。第二个图像（白色桌子上有红色的东西）是非常垂直的，所以我想像这样的一些图像必须用CSS裁剪。但是我不能用Photoshop裁剪实际的图像。例如，它必须用JS或CSS来裁剪。@drake你可以通过设置

背景：url（…）在CSS中裁剪

到给定的图像，然后设置

背景大小

和

背景位置

，在处理视频游戏中的精灵时使用相同的功能。@drake035那么您希望实现什么：所有图像都有相同的高度，但宽度可能不同，或者所有图像都有完全相同的大小（宽度+高度相等）？内在高度较大的图像应该缩小，同时保持其纵横比，还是只调整高度？我很确定图像需要与较短的图像具有相同的高度，并随着屏幕大小的变化而改变大小，以保持该比例，对吗？melc：不错，但宽度不能以像素为单位指定为滑块st响应。@drake035将其设置为

width:100%

可以吗？例如@drake035更新了答案，我认为class

。owl item

更准确。图像必须填满滑块空间，没有间隙。图像也不能扭曲。@drake035欢迎您的帮助，我很高兴它还帮助您检查与之相关的最新更新你最后的评论。这种类型的图书馆不起作用。不要浪费你的时间。

<h2>Vertical align</h2>
<div class="owl-carousel bg-contain">
  <img src="http://lorempixel.com/234/100/technics/1/"  />
  <img src="http://lorempixel.com/234/400/technics/2/"  />
  <img src="http://lorempixel.com/234/200/technics/9/"  />
  <img src="http://lorempixel.com/234/150/technics/10/" />
</div>

<h2>Full Zoom small images</h2>
<div class="owl-carousel bg-cover">
  <img src="http://lorempixel.com/234/100/technics/1/"  />
  <img src="http://lorempixel.com/234/400/technics/2/"  />
  <img src="http://lorempixel.com/234/200/technics/9/"  />
  <img src="http://lorempixel.com/234/150/technics/10/" />
</div>

.owl-wrapper-outer {
  border: 1px solid red;
  font: 0/0 a;
  line-height: 0;
}

.owl-carousel .owl-item {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.bg-contain .owl-item { background-size: contain }
.bg-cover .owl-item { background-size: cover }

.owl-carousel .owl-item img {
  height: auto;
  width: 100%;
  visibility: hidden;
}

$(".owl-carousel").each(function () {
  var $this = $(this);

  $this.owlCarousel({
    afterUpdate: function () {
      updateSize($this);
    },
    afterInit: function () {
      updateSize($this);
    }
  });
});

function updateSize($carousel) {
  var maxHeight = 0;

  $('.owl-item', $carousel).each(function () {
    var $this = $(this);
    var $image = $this.find('img');

    //Max height
    var prevHeight = $this.height();
    var thisHeight = $this.height('auto').height();
    $this.height(prevHeight);
    maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);

    //Set image as background
    var imageSource = $image.attr('src');
    $this.css('backgroundImage', 'url(' + imageSource + ')');
  });

  //Set equal height
  $('.owl-item', $carousel).height(maxHeight);
}

.owl-stage
   display flex
.owl-item
   flex 0 0 auto