68

Bootstrapのカルーセルクラスを使用していて、これまでは簡単でしたが、高さの異なる画像によって矢印が上下にバウンドして新しい高さに調整されるという問題がありました。

これは、カルーセルに使用しているコードです。

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="image_url_300height"/>
            <div class="carousel-caption">
                <h4>...</h4>
                <p>...</p>
            </div>
        </div>
        <div class="item">
            <img src="image_url_700height" />
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

この問題は、このjsfiddleにも示されています（確かに私のものではありません。この問題を解決しようとしているときに、別の質問でこれを見つけました！）

私の質問は、カルーセルを固定の高さ（フィドルの2番目のサムネイル）に保ち、キャプションと矢印をカルーセルに対して静止した位置に保ちながら、小さい画像を中央に配置するにはどうすればよいですか？

4

14 に答える 14

92

ブートストラップが少ないように見えます/CSSは、幅を変更して応答する必要がある場合に、画像が引き伸ばされないように自動高さを強制します。幅を自動にして高さを固定するように切り替えました。

<div class="item peopleCarouselImg">
  <img src="http://upload.wikimedia.org/...">
  ...
</div>

peopleCarouselImg次に、次のようなクラスでimgを定義します。

.peopleCarouselImg img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

身長を225pxに固定します。アスペクト比を正しく保つために、幅を自動的に調整します。

これは私にとってはうまくいくようです。

于 2012-11-21T16:10:12.217 に答える
19

これを試してください（私はSASSを使用しています）：

/* SASS */
.carousel {
  max-height: 700px;
  overflow: hidden;

  .item img {
    width: 100%;
    height: auto;
  }
}

.carousel必要に応じて、をにラップでき.containerます。

/* CSS */
.carousel {
  max-height: 700px;
  overflow: hidden;
}

.carousel .item img {
  width: 100%;
  height: auto;
}

重要なポイントは、高さを一定に保つことです。そこで、max-heightより大きな画像を制約することが重要になります。

または、画像を背景画像として設定して、高さや画像の配置（たとえば、など）をより柔軟に設定することもできbackground-sizeますbackground-position。

応答性を高めるには、メディアクエリを使用する必要があります。

編集：すべてに感謝します、これがまだ検索されていることを知りませんでした。他の開発者を助けるために投票してください！

于 2014-02-12T07:45:23.117 に答える
15

Bootstrapカルーセルスライドの高さを正規化するこのjQueryコードを試してください

function carouselNormalization() {
  var items = $('#carousel-example-generic .item'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { //add heights to array
        heights.push($(this).height());
      });
      tallest = Math.max.apply(null, heights); //cache largest value
      items.each(function() {
        $(this).css('min-height', tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0; //reset vars
      items.each(function() {
        $(this).css('min-height', '0'); //reset min-height
      });
      normalizeHeights(); //run it again 
    });
  }
}

/**
 * Wait until all the assets have been loaded so a maximum height 
 * can be calculated correctly.
 */
window.onload = function() {
  carouselNormalization();
}

于 2017-01-25T21:49:30.620 に答える
10

このコードを使用して、すべてのカルーセル画像に調整することもできます。

.carousel-item{
    width: 100%; /*width you want*/
    height: 500px; /*height you want*/
    overflow: hidden;
}
.carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
于 2019-04-28T21:27:58.167 に答える
5

これが私のために働いた解決策です。カルーセルのコンテンツはユーザーが送信したコンテンツから動的に生成されたため、この方法で実行しました（したがって、スタイルシートで静的な高さを使用できませんでした）-このソリューションは、さまざまなサイズの画面でも機能するはずです。

function updateCarouselSizes(){
  jQuery(".carousel").each(function(){
    // I wanted an absolute minimum of 10 pixels
    var maxheight=10; 
    if(jQuery(this).find('.item,.carousel-item').length) {
      // We've found one or more item within the Carousel...
      jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
      // Now we iterate through each item within the carousel...
      jQuery(this).find('.item,.carousel-item').each(function(k,v){ 
        if(jQuery(this).outerHeight()>maxheight) {
          // This item is the tallest we've found so far, so store the result...
          maxheight=jQuery(this).outerHeight();
        }
      });
      // Finally we set the carousel's min-height to the value we've found to be the tallest...
      jQuery(this).css("min-height",maxheight+"px");
    }
  });
}

jQuery(function(){
  jQuery(window).on("resize",updateCarouselSizes);
  updateCarouselSizes();
}

技術的にはこれは応答性がありませんが、私の目的ではon window resize、これにより応答性が高くなります。

于 2017-03-09T14:06:15.353 に答える
4

誰かがバウンドする画像のカルーセルを解決するために熱狂的にグーグルしている場合、これは私を助けました：

.fusion-carousel .fusion-carousel-item img {
    width: auto;
    height: 146px;
    max-height: 146px;
    object-fit: contain;
}
于 2017-05-03T17:57:56.980 に答える
2

前に示した解決策は、カルーセルボックスに対して画像が小さすぎる可能性がある状況につながります。コントロールのバンピングの問題に対する適切な解決策は、BootstrapsCSSをオーバーライドすることです。

元のコード：

.carousel-control {
top: 40%;
}

独自のスタイルシート内の固定値で変数をオーバーライドします（私のデザインでは300pxが機能しました）。

.carousel-control {
top: 300px;
}

うまくいけば、これはあなたの問題を解決するでしょう。

于 2014-01-08T09:35:36.393 に答える
2

このJavaScriptをフッターに含めます（jQueryをロードした後）：

$('.item').css('min-height',$('.item').height());
于 2016-12-20T09:49:37.307 に答える
1

高さを固定せずに任意の高さの画像でこの作業を行いたい場合は、次のようにします。

$('#myCarousel').on("slide.bs.carousel", function(){
     $(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
     $(this).off("slide.bs.carousel");
});
于 2015-01-22T21:17:09.817 に答える
1

最近、Bootstrapカルーセル用にこのCSSソースをテストしています

380に設定された高さは、表示されている最大/最も高い画像と同じに設定する必要があります。

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  max-height: 100%;
  max-height: 380px;
  margin-bottom: 60px;
  height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
    background: rgba(0, 0, 0, 0.45);
}

/* Declare heights because of positioning of img element */
.carousel .item {
  max-height: 100%;
  max-height: 380px;
  background-color: #777;
}
.carousel-inner > .item > img {
 /*  position: absolute;*/
  top: 0;
  left: 0;
  min-width: 40%;
  max-width: 100%;
  max-height: 380px;
  width: auto;
  margin-right:auto;
  margin-left:auto;
  height:auto;
  
}
于 2015-07-28T18:07:10.927 に答える
0

cssファイルで次の行を使用できます。

ul[rn-carousel] {
 > li {
 position: relative;
 margin-left: -100%;

 &:first-child {
   margin-left: 0;
   }
  }
}
于 2016-07-18T22:43:03.710 に答える
0 
 .className{
 width: auto;
  height: 200px;
  max-height: 200px;
   max-width:200px
   object-fit: contain;
}
于 2017-10-18T05:28:02.397 に答える
0

このjQuery関数は私にとって最適に機能しました。WordPressテーマ内でブートストラップ4を使用しており、jQueryslimの代わりに完全なjQueryを使用しています。

// Set all carousel items to the same height
function carouselNormalization() {

    window.heights = [], //create empty array to store height values
    window.tallest; //create variable to make note of the tallest slide

    function normalizeHeights() {
        jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
            window.heights.push(jQuery(this).outerHeight());
        });
        window.tallest = Math.max.apply(null, window.heights); //cache largest value
        jQuery('#latest-blog-posts .carousel-item').each(function() {
            jQuery(this).css('min-height',tallest + 'px');
        });
    }
    normalizeHeights();

    jQuery(window).on('resize orientationchange', function () {

        window.tallest = 0, window.heights.length = 0; //reset vars
        jQuery('.sc_slides .item').each(function() {
            jQuery(this).css('min-height','0'); //reset min-height
        }); 

        normalizeHeights(); //run it again 

    });

}

jQuery( document ).ready(function() {
    carouselNormalization();
});

ソース：

https://gist.github.com/mbacon40/eff3015fe96582806da5

于 2018-08-28T19:44:59.633 に答える
0

ここで高さを正規化するjQueryソリューションはIEで機能しない可能性があることに注意してください。

（Bootstrap 3を使用した）いくつかのテストの後、実際にレンダリングされていない限り、IEは画像のサイズ変更を気にしないようです。ウィンドウを小さくすると、アクティブなアイテムの画像のサイズは変更されますが、背景画像の高さは維持されるため、「最も高い」高さは同じままです。

私の場合、これらのアイテムに画像をレンダリングするだけで、画像はほんの数ピクセルずれていました。そこで、アクティブな画像の高さですべての画像のスタイルを設定することにしました。それ以外はすべて高さに合わせてサイズが変更されるため、アスペクト比が大きく異なる場合は注意してください。

    function carouselNormalization() {
        var items = $('.carousel .item');

        if (items.length) {
            function normalizeHeights() {
                let activeImageHeight = items.filter('.active').find('img').height();
                items.each(function() {
                    $(this).find('img').css('height',  activeImageHeight + 'px');
                });
            };
            normalizeHeights();

            $(window).on('resize orientationchange', function() {
                items.each(function() {
                    $(this).find('img').removeAttr('style');
                });
                normalizeHeights();
            });
        }
    }
    $(window).on('load', carouselNormalization);
于 2019-12-30T18:14:58.313 に答える