web-dev-qa-db-ja.com

画像スライダー：スライダーの応答性を維持しながら、すべての画像で同じ高さを維持

私のJS画像スライダー（Owl-Carousel）では、画像の寸法が異なります：

http://goo.gl/KmpX2P

enter image description here

カルーセル内で画像の高さが異なることがわかります。カルーセルの応答性を維持しながら一定にする方法は？常にスライダースペースを埋める画像が必要なので、CSSを使用して何らかの方法でトリミングする必要があります。望ましい結果は次のようになります。

enter image description here

javascriptcssslideshowcarousel
16
drake035

Cssで指定できます。

例、

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

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

[〜＃〜] edit [〜＃〜]次のソリューションでは、プラグインのコールバックイベントを使用して、最小の画像の高さに応じてビューポート/ラッパーの高さを変更します。 。

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

    }
25
melc

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);
}
5
java-man-script

私の画像は動的に読み込まれます。つまり、画像名は時々変更される可能性があります。背景画像として保持し、適切な画像名をcssファイルに渡すにはどうすればよいですか？

0
Allen

Flexboxを使用して同じ高さを実現できます。これを試して：

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

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

または、使用する場合は、コンテナの幅に応じてuseauto resizeを使用できます

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

}

0
user3222498

バイオリンを入れてほしいが、私の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>

それが機能する場合、これを書くためのより良い方法がありますが、それはあなたに解決策の始まりを与えるでしょう

0
Likwid_T