Applicare "background-size: cover" a Twitter Bootstrap Carousel diapositive

Question

Sto lavorando con un Bootstrap Carousel di base con tre diapositive. Prima di implementare il cursore, avevo un'immagine statica tramite css background-image del rispettivo div. Nel mio CSS, stavo usando background-size: cover, e mi è piaciuto molto il modo in cui l'immagine rispondeva alle diverse larghezze del browser. A seconda della larghezza della mia immagine, ho potuto ottenere la parte importante dell'immagine per rimanere sempre visibile e centrata, mentre la larghezza extra su entrambi i lati era visibile solo sui monitor widescreen come effetto aggiunto.

Voglio mantenere lo stesso comportamento di immagine ora che sto usando il Carousel di Bootstrap, ma anche se assegno le dimensioni alla finestra della diapositiva, non riesco ancora a visualizzare le mie immagini di sfondo. Attualmente lo ho impostato in modo tale che ogni diapositiva mostri una classe CSS separata, e ognuno abbia un'immagine di sfondo diversa in modo che possa scorrere tra tre immagini.

Se ciò non è possibile tramite background-image, esiste un altro modo per manipolare gli elementi dell'immagine in modo che il loro comportamento di visualizzazione sia lo stesso di background-size: cover?

Ecco il mio 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> 

E il mio 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; 
} 

Speriamo che questo non è una domanda stupida e siamo in grado di capire questo fuori!

Answer 1

So che la mia risposta è abbastanza tardi, ma ho appena trovato la tua domanda attraverso una ricerca per fare qualcosa di simile. Prima di tutto, è necessario rimuovere le immagini dall'HTML e modificare un po 'il CSS per applicare l'altezza a tutti i div con "item" di classe all'interno del carosello.

Applicando le mie modifiche al codice dovrebbe essere qualcosa di simile:

<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> 

E il 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

Questo è jQuery equivalente del codice di copertina:

$.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'); 
    }); 

Prende la fonte dell'immagine e passa all'elemento e quindi nasconde l'immagine reale.

Inoltre potrebbe essere necessario nascondere il carousel fino al completamento di jQuery.each. Suggerisco di fare visibilità: hack nascosto per immagini a livello CSS. In questo modo gli utenti non potranno notare l'ingrandimento delle immagini su schermi più grandi.

Answer 3

Abbiamo appena trovato questa codepen https://codepen.io/wisnust10/pen/mPJwWv/ che utilizza un'altra soluzione. (vedi 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; 
    } 

Testato questo in cromo e IE e fa il trucco.

Spero che possa aiutare in qualche modo.