web-dev-qa-db-ja.com

フクロウカルーセルの高さは固定ですか？

私は現在Owl Carouselを使用していますが、各画像の高さが一定になるように画像サイズを調整する方法があるかどうか疑問に思っています。写真を表示するためにこのプラグインを使用していますが、横長と縦長の両方のサイズがあります。 JSでautoWidthを使用しようとしましたが、ポートレート画像が大きすぎ、風景画像が短すぎます。すべての画像の高さを設定するにはどうすればよいですか？ CSSを調整しようとしましたが、横長の画像が次の画像の背後にあるようで、全幅が表示されません。設定された幅があるように見えます。幅を調整すると、画像が引き伸ばされます。カルーセルには19個のアイテムがあります。また、JSのレスポンシブ部分のアイテムを調整してみました。2つのアイテムに調整すると、ランドスケープ画像は正しい比率ですが、ポートレート画像は引き伸ばされてしまいます。修正方法に関するアイデアはありますか？

私が使用したCSSコードは次のとおりです。

    #demos img{
    display: inline-block; 
    max-width: auto;  
    height: 500px!important; 
    margin-bottom: 30px;
  }

Javascript：

 $(document).ready(function() {
    $('.owl-carousel').owlCarousel({
      loop: true,
      margin: 0,
      responsiveClass: true,
      responsive: {
        0: {
          items: 1,
          nav: true
        },
        600: {
          items: 3,
          nav: false
        },
        1000: {
          items: 5,
          nav: true,
          loop: true,
          margin: 0
        }
      }
    })
  })
javascriptjqueryhtmlcssowl-carousel
7
abc0213

Bootstrapを使用している場合は、img-responsiveクラス：

<img class="img-responsive">

これは私のために働いた、私も同じ問題に直面していた。

1
JpG

このようなもので遊んでみてください：

display:block; height:500px !important; margin:0 auto 30px;
0
NoWomenNoCry