Twitter Bootstrapのカルーセルスライドに "background-size：cover"を適用してください

Question

私は基本的なブートストラップカルーセルと3つのスライドを使って作業しています。スライダを実装する前に、それぞれのdivのCSS背景画像を使って1つの静止画像を作成しました。私のCSSではbackground-size：coverを使っていましたが、実際にはブラウザの幅に応じて画像が反応する方法が気に入っていました。画像の幅に応じて、画像の重要な部分を常に視認して中央に置くことができました。一方で、余分な幅はワイドスクリーンモニターでしか見えませんでした。

私はBootstrap's Carouselを使用しているので、同じ画像の動作を保持したいと思いますが、スライドのビューポートに寸法を割り当てても、私はまだ背景画像を表示できません。私は現在、それが設定されているので、各スライドは別々のCSSクラスを表示し、それぞれ異なる背景画像を持ち、3つの画像間をスクロールすることができます。

これがバックグラウンドイメージでは不可能な場合は、画像要素を操作して表示動作がbackground-size：coverと同じになるように別の方法がありますか？ここで

は私のHTMLです：

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item ad1"> 
     <img src="{{ STATIC_URL }}img/TestBannerAd.png"> 
    </div> 
    <div class="item ad2"> 
     <img src="{{ STATIC_URL }}img/TestBannerAd2.png"> 
    </div> 
    <div class="item ad3"> 
     <img src="{{ STATIC_URL }}img/TestBannerAd3.png"> 
    </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> 

そして、私のCSS：

#myCarousel { 
    width: 100%; 
} 
.carousel-control { 
    margin-top: 20px; 
} 
.carousel-inner { 
    width: 100%; 
    height: 400px; 
} 
.ad1 { 
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.ad2 { 
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.ad3 { 
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

がうまくいけば、これは愚かな質問ではなく、我々はこれを把握することができます！

Answer 1

私の回答はかなり遅いと知っていますが、似たようなことをするための検索であなたの質問が見つかりました。まず、HTMLからイメージを削除し、CSSを少し変更して、カルーセル内のクラス「アイテム」を持つすべてのdivに高さを適用する必要があります。

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="item active ad1"> 
     <div class="carousel-caption"> 
      <h4>First Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
    </div> 
    <div class="item ad2"> 
     <div class="carousel-caption"> 
      <h4>Second Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
    </div> 
    <div class="item ad3"> 
     <div class="carousel-caption"> 
      <h4>Third Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     </div> 
    </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> 

とCSS：

#myCarousel { 
    width: 100%; 
} 
.carousel-control { 
    margin-top: 20px; 
} 
.carousel-inner .item { 
    width: 100%; 
    height: 400px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.ad1 { 
    background: url(../img/TestBannerAd.png) no-repeat center center fixed; 
} 
.ad2 { 
    background: url(../img/TestBannerAd2.png) no-repeat center center fixed; 
} 
.ad3 { 
    background: url(../img/TestBannerAd3.png) no-repeat center center fixed; 
} 

Answer 2

カバーコードのjQueryのと同等です：

$.each(jQuery('.carousel .item'), function(i, val) { 
    $(this).css('background-image','url('+$(this).find('img').attr('src')+')').css('background-size','cover').find('img').css('visibility','hidden'); 
    }); 

それはこのようなものでなければなりませんあなたのコードに私の修正を適用する

イメージソースを取得してアイテムに渡し、実際のイメージを非表示にします。

さらに、jQuery.eachが完了するまでカルーセルを非表示にする必要があります。私は可視性を行うことを提案しています：CSSレベルで画像の隠れたハック。そのため、ユーザーは大きな画面では画像の拡大に気付かれません。

Answer 3

このcodepenが見つかったのはhttps://codepen.io/wisnust10/pen/mPJwWv/ で、別の解決策が使用されています。 （CSSを参照）

.item:nth-child(1) { 
    background: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/HZZKGVVJ6I.jpg'); 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    } 

はChromeとIEでこれをテストし、それがトリックを行います。

何とか助けてくれるといいですね。