Bewerben "Hintergrundgröße: Cover" auf Twitter Bootstrap Carousel Folien

Question

Ich arbeite mit einem grundlegenden Bootstrap Karussell mit drei Folien. Bevor ich den Slider implementiert habe, hatte ich ein statisches Bild über css background-image seines jeweiligen div. In meinem CSS verwendete ich background-size: cover und mochte die Art, wie das Bild auf verschiedene Browserbreiten reagierte. Abhängig von der Breite meines Bildes konnte ich den wichtigen Bildausschnitt immer sichtbar und zentriert sehen, während die zusätzliche Breite auf beiden Seiten nur auf Widescreen-Monitoren als zusätzlicher Effekt sichtbar war.

Ich möchte das gleiche Bild Verhalten jetzt beibehalten, dass ich Bootstrap-Karussell verwenden, aber selbst wenn ich Dimensionen der Ansichtsfenster der Folie zuweisen, kann ich immer noch nicht meine Hintergrundbilder angezeigt werden. Ich habe es derzeit eingerichtet, so dass jede Folie eine separate CSS-Klasse anzeigt, und jede hat ein anderes Hintergrundbild, so dass es zwischen drei Bildern scrollen kann.

Wenn dies nicht über Hintergrundbild möglich ist, gibt es dort eine andere Möglichkeit, Bildelemente zu manipulieren, so dass ihr Anzeigeverhalten dasselbe ist wie Hintergrundgröße: cover?

Hier ist mein 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> 

Und mein 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; 
} 

Hoffentlich nicht eine dumme Frage ist, und wir können dies herauszufinden!

Answer 1

Ich weiß, meine Antwort ist ziemlich spät, aber ich habe gerade Ihre Frage durch eine Suche gefunden, etwas ähnliches zu tun. Zuallererst müssen Sie die Bilder aus dem HTML entfernen und ein wenig das CSS ändern, um die Höhe auf alle divs mit der Klasse "item" innerhalb des Karussells anzuwenden.

Anwenden meine Änderungen an Ihrem Code sollte es so etwas wie dieses:

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

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

Das ist jQuery Äquivalent des Deckungscode:

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

Es nimmt die Bildquelle und geht in das Objekt und blendet dann das tatsächliche Bild aus.

Zusätzlich müssen Sie möglicherweise Karussell ausblenden, bis jQuery.each abgeschlossen ist. Ich empfehle Sichtbarkeit: versteckter Hack für Bilder auf CSS-Ebene. So wird den Nutzern auf größeren Bildschirmen die Bildvergrößerung nicht aufgefallen.

Answer 3

Gefunden gerade diese Codepegel https://codepen.io/wisnust10/pen/mPJwWv/ , die eine andere Lösung verwendet. (siehe 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; 
    } 

Getestet in Chrom und IE und es macht den Trick.

Hoffe es kann irgendwie helfen.