wake-up-neo.net

Wie mache ich Bilder im Bootstrap-Karussell?

Gibt es eine Möglichkeit, Ihre Bilder im Bootstrap-Karussell mit einer festen Höhe ansprechend zu gestalten? Ich habe alles versucht. Ich habe auch img-responsive verwendet, und im CSS habe ich auch alles versucht. 

Hier ist mein HTML

    <div class="item active">
      <img src="images/slide1.jpg" alt="First slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption" style="padding-bottom:90px;">
          <h1>Totes for all</h1>
          <p>Personalize your style</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

    <div class="item">
      <img src="images/slide2.png" alt="Second slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <div class="caption_background">
          <h1>Pattern it</h1>
          <p>Choose your favorite</p>
          </div>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.myCarousel -->

Hier ist mein CSS

http://paste.ubuntu.com/7908633/

5
nattienatz

Zunächst müssen Sie die von Bootstrap bereitgestellten Funktionen überprüfen, insbesondere das Rastersystem und die entsprechenden Dienstprogramme.

Bootstrap 3.2.0 - CSS

Um eine gute Reaktion zu ermöglichen, sollten Breite und Höhe entsprechend der aktuellen Bildschirmgröße angepasst werden können.

Darüber hinaus können Sie verwandte Fragen zu StackOverflow finden, zum Beispiel:

Wie mache ich ein Bootstrap-Karussell-Image?

5
vdenotaris

Versuchen Sie es mit diesem jq, es macht Ihre .carousel-innere als Fensterhöhe. Denken Sie jedoch daran, dass Sie Ihre Navnbar, Fußzeile ect. alle anderen Elemente/Divs-Höhen müssen Sie -.

function init_carousel() {
            H = +($(window).height() /* -height here  */); // or $('.carousel-inner') as you want ...
            $('.carousel-inner').css('height', H + 'px');
        }
        window.onload = init_carousel;
        init_carousel();
2
Daniel Leth

Versuchen Sie es mit bootsniphttp://bootsnipp.com/snippets/featured/simple-responsive-carousel . Dies ist eine gute Website für das Kopieren und Einfügen von snippets für Bootstrap.

1
Akash

Ich weiß, dass dies für die Party etwas spät ist, aber ich hatte dieses Problem vor kurzem überwunden, indem jedem Element eine eigene ID zugewiesen wurde und die Bilder dann als Elemente in CSS als Hintergrundbilder festgelegt wurden.

<div id="header-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div id="cazza1" class="item active">
    </div>
    <div id="cazza2" class="item">
    </div>
    <div id="cazza3" class="item">
    </div>
  </div>
</div>

Und das CSS:

#header-carousel {
  height: 240px;
}#cazza1 {
  height: 240px;
  background-image: url(/images/header1.jpg);
  background-position: center center;
  background-size: cover;
}#cazza2 {
  height: 240px;
  background-image: url(/images/header2.jpg);
  background-position: center center;
  background-size: cover;
}#cazza3 {
  height: 240px;
  background-image: url(/images/header3.jpg);
  background-position: center center;
  background-size: cover;
}
0
Andy Jacko