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

我看过这个图像演示

我要求猫头鹰转盘必须始终具有相同的宽度和高度.例如,必须符合给定的边界.

图片应该background-size: contain用来使它们合身.所以我担心我不能img直接使用标签.

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

例如应该是这样的:

所以显示的图片数量是未知的,这取决于图片的比例和宽度

有没有办法用猫头鹰旋转木马做到这一点？

虽然这是一个老问题,但我有同样的问题.这是我的解决方案:

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/