Twitter Bootstrap: Haben Karussell Bilder volle Breite und Höhe

Question

dies scheint eine triviale Frage, aber nach ein paar Stunden hantieren mit dem Twitter Bootstrap Karussell in ihrem Beispiel (http://twitter.github.io/bootstrap/examples/carousel.html) Ich griff zu SO für einige Hilfe.

Ich möchte das Karussell die volle Breite anzeigen (wie jetzt), aber nicht mit einer beschnittenen Höhe. Ich habe versucht, Mindesthöhe, Höhe usw. auf 100% in verschiedenen Behältern zu setzen, aber ohne Ergebnis. Irgendwelche zwei Cent?

Answer 1

Wenn Sie die Größe des Browserfensters im Beispielkarussell auf der Bootstrap-Site ändern, sehen Sie, dass das Bild tatsächlich auf der X-Achse gestreckt wird. Um den gleichen Effekt zu erreichen, verwenden ihre CSS:

.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

Die letzten beiden Attribute, min-Breite und Höhe, von Bedeutung. Die Höhe wird auf die gewünschte Größe des Karussells eingestellt.

Schließlich sollten Sie img-Tags verwenden, um Ihr Bild zu platzieren, anstatt ein Hintergrundbild. Hier ist ein volleres Beispiel:

<div class="item"> 
    <img src="image.jpg" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Header</h1> 
      <p class="lead">This is a caption</p> 
      <a class="btn btn-large btn-primary" href="#">Large Button</a> 
     </div> 
    </div> 
</div> 

Ich hoffe, das hilft. Prost!

Answer 2

Sie können einfach ihre CSS dies ändern, aber es wird Ihr Bild Ernte von verursachen, was nicht passt:

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    min-height: 500px; /* <--- Change this line to min-height */ 
} 

Answer 3

denken, dass ich eine Lösung mit einfachen CSS Änderungen bekommen haben? Ändern Sie einfach Folgendes von (OLD) zu;

.carousel { 
    /*height: 500px; OLD*/ 
    /*margin-bottom: 60px; OLD*/ 

    /*max-width:1200px; THIS IS OPTIONAL (ANY SIZE YOU LIKE)*/ 
    margin:0 auto 60px; 
} 

.carousel .item { 
    /*height: 500px; OLD*/ 
    /*background-color: #777; OLD*/ 

    width:100%; 
    height:auto; 
} 
.carousel-inner > .item > img { 
    /*position: absolute; OLD+WHY?*/ 
    /*top: 0; OLD+WHY?*/ 
    /*left: 0; OLD+WHY?*/ 

    min-width:100%; 
    height:auto; 
} 

Answer 4

Verwenden Sie das folgende für jedes Bild wollen Sie in der Folie einzufügen:

<img class="img-responsive center-block" src="#"> 

Answer 5

Für Bootstrap 3, alles was Sie brauchen:

.carousel img { 
    min-width: 100%; 
} 

Answer 6

Obwohl dies geht zurück 3 Jahre , Lösung gegeben durch 'Nate Beers' löste mein Problem, wenn Bootstrap 3.3.7

Sein wegen 'Max-Breite' Sets verwendet die maximale Breite des Elements, die die Breiteneigenschaft überschreibt, wenn die Breite größer als die maximale Breite ist.

Auch 'min-width' überschreibt immer die 'max-width'.

Hier ist an example in Codepen, Größe ändern Sie das Vorschaufenster, um zu sehen, wie es funktioniert.

Überprüfen Sie das untere Element insbesondere, indem Sie die Größe auf die kleinstmögliche Breite ändern und mit 2 anderen Elementen i1 und i2 vergleichen.

<div class="i3">Sample</div>