Question

在我的JS图像滑块（Owl-Carousel）中，图像具有不同的尺寸：

http://goo.gl/KmpX2P

enter image description here

您可以看到图像高度在旋转木马中有所不同。如何在保持旋转木马响应的同时使其保持恒定？我需要图像一直填充滑块空间，因此有些必须通过CSS以某种方式裁剪。期望的结果如下所示：

enter image description here

Answer 1

可以在css中指定。

实施例，

http://jsfiddle.net/AwBLL/2/

.owl-carousel .owl-item{
    height:285px;
    width:100%;
}

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

http://jsfiddle.net/DNMpF/1/

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

<强> CSS

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

Answer 2

随机高度为http://jsfiddle.net/AwBLL/108/

的幻灯片

HTML：

<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>

CSS：

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

JS：

$(".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);
}

Answer 3

如果你在你的caroual中使用带有背景图像的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;
}

否则，如果您使用，则可以根据容器宽度使用auto resize

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

}

Answer 4

希望你提出一个小提琴，但是在我的Notepad ++顶部你可以尝试将它放在你的页面底部，看看是否适合你。

<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>

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

Answer 5

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

Answer 6

使用flexbox可以达到相同的高度。试试这个：

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

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

6 个答案: