Bootstrap-Karussell auf volle Höhe einstellen

Wie setze ich die Höhe von Carousel auf Full, ich möchte, dass es den Bildschirm belegt, wenn der Benutzer die Seite öffnet und das Verhalten für Mobilgeräte gleich ist.Bootstrap-Karussell auf volle Höhe einstellen

Beim Zugriff auf die Website muss das Carusel den gesamten Anzeigebereich einnehmen. Es sollte nicht möglich sein, den Text "Our Services" zu visualisieren, ohne Scroling scrollen zu müssen.

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 

     <div class="item active"> 
     <img src="img\portfolio\concretobombeado.jpg" alt="Chania" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Chania</h3> 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg" alt="Chania" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Chania</h3> 
      <p>The atmosphere in Chania has a touch of Florence and Venice.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg"alt="Flower" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Flowers</h3> 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="img\portfolio\limpeza.jpg" alt="Flower" width="460" height="345"> 
     <div class="carousel-caption"> 
      <h3>Flowers</h3> 
      <p>Beatiful flowers in Kolymbari, Crete.</p> 
     </div> 
     </div> 

    </div> 

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

Quelle

2017-03-27 Paulo Roberto

können Sie dies zu Ihrer CSS-Datei hinzufügen.

#myCarousel{ 
height:100vh; 
width:100%; 
}

100vh würde die Höhe Ihres Carousals auf 100% der Bildschirmhöhe des Geräts einstellen.

Dies würde die Höhe und Breite Ihres Carousal auf den gesamten Bildschirm einnehmen.

Danach müssen Sie möglicherweise auch die Höhe der .carousel-inneren Klasse auf 100% ändern. dann kannst du die Breite deiner Bilder entsprechend anpassen.

Quelle

2017-03-27 17:34:21 lhavCoder

Sie haben mit id="myCarousel" zu 100% der Höhe des äußeren div einzustellen. Fügen Sie es in der CSS-Datei oder in der HTML-Datei hinzu. Verwenden Sie auch die gesamte Höhe, die Sie benötigen, um die Höhe der <html> und <body> auf 100% (oft die ersten beiden Klassen in einer CSS-Datei) zu setzen.

Quelle

2017-03-27 17:09:16 pudi

Sie müssen das Karussellbild und einen der Container zu 100% hochstellen.

html,body{height:100%;} 
.carousel,.item,.active{height:100%;} 
.carousel-inner{height:100%;} 
.carousel-inner>.item>img { 
    height:100%; 
}

Demo

Quelle

2017-03-27 17:16:13 ZimSystem

Es funktionierte teilweise, sehen Sie, wie das Bild nach dem Anwenden dieses CSS war: http://imgur.com/a/FNy5B –

Es gibt etwas anderes in der CSS, die das verursachen würde. Stellen Sie sicher, dass Sie den gesamten relevanten Code bereitstellen. – ZimSystem

Wie die andere Antwort, müssen Sie die Höhe von #myCarousel auf 100% gesetzt. Eine andere Sache, die Sie tun können und helfen können, ist vh anstelle von Pixeln für Ihre Elemente wie Text.

Basierend auf Ihrem Bild, ich beurteile, dass Sie Portugiesisch sprechen. Also, hier ist eine kleine Hilfe über CSS-Einheiten für Sie. Unidades de CSS Moderno

Und hier ist der W3C Leitfaden, der explains the same aber in Englisch tut.

PS: Ich würde dies in einen Kommentar in pudis Antwort ergänzen, aber ich habe nicht wirklich genug Ruf, um das zu tun.

Quelle

2017-03-27 17:21:15

Bootstrap-Karussell auf volle Höhe einstellen

Antwort

Verwandte Themen