web-dev-qa-db-ja.com

「background-size：cover」をTwitterに適用Bootstrapカルーセルスライド

基本的なBootstrapカルーセルと3つのスライドを使用しています。スライダーを実装する前に、css background-imageを介してそれぞれのdivの静止画像を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;
}

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

csstwitter-bootstrapsliderbackground-image
11
Betafresh Media

回答がかなり遅れていることは承知していますが、同様のことをするための検索であなたの質問を見つけました。まず、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; 
}
25
Ana Mendoza

これは、カバーコードに相当する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レベルで画像の可視性：隠しハックを行うことをお勧めします。そのため、ユーザーは大きな画面で画像が拡大されていることに気付くことはありません。

8
tolginho

この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でテストし、トリックを実行します。

それが何らかの形で役立つことを願っています。

1
bluedot

「.item」クラスで「backgroundproperty」を使用し、「img」タグは使用されません

.carousel {
    height: 300px;
}

.carousel-inner {
    height: 100%;
}

.item {
    width: 100%;
    height: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center;
}
/*
img {                
    object-fit: cover;
}
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
<div id="myCarousel" class="carousel slide">

    <!-- Carousel items -->
    <div class="carousel-inner">
    
        <div class="item active" style="background-image: url(https://dummyimage.com/300x200/000/fff)" >
<!--            <img src="http://placehold.it/650x450/aaa&text=Item 1" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 2" style="width: 100%; height: 100%" /> -->
        </div>
        
        <div class="item" style="background-image: url(https://dummyimage.com/1200x800/000/fff)" >
<!--            <img src="http://placehold.it/350x350/aaa&text=Item 3" style="width: 100%; height: 100%" /> -->
        </div>
        
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Codepen

  • 編集者
  • 全景

    • imgのバージョン

    0
    antelove