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

Posted 2023-02-16

【中文标题】图像滑块：保持所有图像的高度相同，同时保持滑块响应

【英文标题】：Image slider: maintaining equal height for all images while keeping slider responsive

【发布时间】：2014-03-01 17:36:08

【问题描述】：

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

http://goo.gl/KmpX2P

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

【问题讨论】：

所以所有图像都必须具有相同的高度并并排占据所有宽度？正确的？你可以剪切图像。

第二张图片（上面有红色东西的白色桌子）是非常垂直的，所以我想像这样的一些图片必须通过 CSS 裁剪。但是我不能使用 Photoshop 裁剪实际的图像，它必须通过 JS 或 CSS 来完成。

@drake 您可以通过将background:url(...) 设置为给定图像，然后设置background-size 和background-position，在css 中进行裁剪，相同的功能用于处理精灵视频游戏。

@drake035 那么您想要实现什么：所有图像的高度相同，但宽度可能不同，或者所有图像的尺寸完全相同（宽度+高度相等）？应该在保持纵横比的同时缩小固有高度较大的图像还是只调整高度？

我很确定图像需要与较短的图像高度相同，并在屏幕调整大小时更改大小以保持该比例，对吗？

【参考方案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');
            
        );

    

【讨论】：

melc: 不错，但宽度不能以像素为单位指定，因为滑块必须是响应式的..

@drake035 将其设置为width:100% 可以吗？例如jsfiddle.net/AwBLL/1

@drake035 更新了答案，我认为.owl-item 类更准确。

图片必须填满滑块空间，没有间隙。图片也不能失真。

@drake035 欢迎您，我很高兴它对您有所帮助，还请查看与您的上一条评论相关的最新更新。

【参考方案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);

【参考方案3】：

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

【参考方案4】：

如果您在 carsoual 中使用带有背景图像的 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%;

【讨论】：

不适用于这种类型的库。不要浪费你的时间。

【参考方案5】：

希望你能拿出一个小提琴，但在我的 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>

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

【参考方案6】：

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

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