Question

I have seen this demo for images

我要求猫头鹰转盘必须始终具有相同的宽度和高度。例如。必须符合既定的界限。

图片应使用background-size: contain使其合适。所以我担心我不能直接使用img标签。

下一张图片必须紧挨着下一张图片，中间没有空格。

e.g。应该是这样的：

所以显示的图片数量未知，具体取决于图片的比例和宽度

有没有办法用owl carousel做到这一点？

Answer 1

虽然这是一个老问题，但我有同样的问题。这是我的解决方案：

jQuery(document).ready(function($) {
  $(".owl-carousel").each(function(index, el) {
    var containerHeight = $(el).height();
    $(el).find("img").each(function(index, img) {
      var w = $(img).prop('naturalWidth');
      var h = $(img).prop('naturalHeight');
      $(img).css({
        'width': Math.round(containerHeight * w / h) + 'px',
        'height': containerHeight + 'px'
      });
    }),
    $(el).owlCarousel({
      autoWidth: true
    });
  });
});

它调整旋转木马中的图像大小以适应旋转木马容器所需的高度（尊重纵横比）。

jsFiddle中的完整示例：http://jsfiddle.net/yzLqv3qk/

Answer 2

您可以将容器设置为您需要的任何大小，并将图像设置为css中的背景，每个图像都有以下内容：

.item.item1{
   background: url(images/slide1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;

}

.item.item2{
   background: url(images/slide2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;

}

这将使图像保持相同的大小，但它会根据需要裁剪它们以适合您预定义的大小。这种方法的缺点是你必须在CSS中定义图像，而不是HTML - 但我之前在OWL滑块上使用过这种方法。

Answer 3

我最近遇到了与Owl Carousel类似的问题。在单个轮播中使用三种不同的图像宽高比，您可以在此处应用相同的逻辑。

首先，我将外部owl-container设为视口的流体宽度：

#owl-container {
  width:50%;
  height:100%;
  position:relative;
}

然后让owl-item img符合这个：

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

在为每个单独的图像宽高比提供独特的流体宽度之前，在上面拟合并使你能够匹配每个高度（来回计算正确的百分比）：

.landscape {
   width:100%;
}

.portrait {
  width:25%;
}

.square {
  width:50%
}

让每个幻灯片的代码看起来像这样：

<div class="item landscape"><img src="../xyz.jpg" alt="xyz"></div>
<div class="item portrait"><img src="../xyz.jpg" alt="xyz"></div>
<div class="item square"><img src="../xyz.jpg" alt="xyz"></div>

Answer 4

是一个非常老的问题，但是我不得不在Arnie Schraufenziger的回答中添加更多内容，因为他的代码将图片发送到顶部。

$(".owl-carousel").each(function(index, el) {
    var containerHeight = $(el).height();
    $(el).find("img").each(function(index, img) {
        var w = $(img).prop('naturalWidth');
        var h = $(img).prop('naturalHeight');
        var winWidth = $(window).width();
        var differenceInHeight = containerHeight - (h / 2);
        if(w>h && winWidth >= 992){         
        $(img).css({
            'width': w + 'px',
            'height': 'auto',
            'max-height': containerHeight + 'px'
        });
        }else if (w>h && winWidth <= 991){
            $(img).css({
                'width': w + 'px',
                'height': 'auto',
                'max-height': containerHeight + 'px',
                'margin-top': differenceInHeight + 'px'
            });
        }else if(h>w && winWidth >= 992){
            $(img).css({
                'width': Math.round(containerHeight * w / h) + 'px',
                'height': containerHeight + 'px'
            });
        }else if(h>w && winWidth <= 991){
            $(img).css({
                'width': Math.round(containerHeight * w / h) + 'px',
                'height': containerHeight + 'px'
            });
        }
    }),
    $(el).owlCarousel({
      autoWidth: true
    });
  });

您可以根据自己的喜好设置所需的窗口宽度;）

猫头鹰旋转木马的图像大小不同？

4 个答案: