11

3 つのスライドを含む基本的な Bootstrap Carousel を使用しています。スライダーを実装する前に、それぞれの div の css background-image を介して 1 つの静的な画像がありました。私の CSS では、background-size:cover を使用していましたが、さまざまなブラウザーの幅に対する画像の反応がとても気に入りました。画像の幅に応じて、画像の重要な部分が常に中央に表示されるようにすることができましたが、どちらかの側の余分な幅は追加効果としてワイドスクリーン モニターでのみ表示されました。

Bootstrap のカルーセルを使用しているので、同じ画像の動作を保持したいのですが、スライドのビューポートに寸法を割り当てても、背景画像を表示できません。現在、各スライドに個別のcssクラスが表示され、それぞれに異なる背景画像があるため、3つの画像間をスクロールできるように設定しています。

これが background-image を介して不可能な場合、画像要素を操作して表示動作が 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;
}

うまくいけば、これはばかげた質問ではなく、私たちはこれを理解することができます!

4

4 に答える 4

26

私の回答はかなり遅いことは知っていますが、似たようなことをするための検索であなたの質問を見つけました。まず、HTMLから画像を削除し、CSSを少し変更して、カルーセル内のクラス「item」を持つすべての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; 
}
于 2013-02-14T20:28:11.453 に答える
8

これは、カバー コードに相当する 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 レベルで画像の visibility:hidden hack を実行することをお勧めします。そのため、ユーザーは大画面での画像の拡大に気付かれません。

于 2014-01-16T12:43:39.373 に答える