Bootstrap di Twitter: le immagini del carosello di larghezza e altezza

Question

questa sembra una domanda banale ma dopo un paio d'ore che armeggia con il carosello di Twitter Bootstrap nel loro esempio (http://twitter.github.io/bootstrap/examples/carousel.html) ricorro a SO per un po 'di aiuto.

Desidero che il carosello visualizzi l'intera larghezza (come ora) ma non con un'altezza ridotta. Ho provato a impostare altezza minima, altezza ecc. Al 100% in contenitori diversi ma senza risultato. Qualsiasi due centesimi?

Answer 1

Dal carosello di esempio sul sito di bootstrap, se ridimensionate la finestra del browser vedrete che l'immagine viene effettivamente allungata nell'asse x. Per ottenere lo stesso effetto, utilizzare il loro CSS:

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

Gli ultimi due attributi, min-width e l'altezza, sono di importanza. L'altezza è impostata sulla dimensione desiderata della giostra.

Infine, si desidera utilizzare i tag img per posizionare l'immagine, piuttosto che un'immagine di sfondo. Ecco un esempio più completo:

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

Spero che questo aiuti. Saluti!

Answer 2

Si può semplicemente cambiare il loro CSS per questo, ma causerà la vostra immagine al raccolto di ciò che non va bene:

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

Answer 3

credo di aver ottenuto una soluzione con semplici modifiche CSS? Basta cambiare il seguente da (OLD) a;

.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

Usare il seguente per ogni immagine che si desidera inserire nella diapositiva:

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

Answer 5

Per Bootstrap 3, tutto ciò che serve è:

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

Answer 6

Anche se questo risale a 3 anni , la soluzione fornita da 'Nate Beers' ha risolto il mio problema, quando si utilizza Bootstrap 3.3.7

È perché set "max-width" la larghezza massima dell'elemento che sovrascrive la proprietà width quando la larghezza è maggiore della larghezza massima.

Anche 'min-larghezza' sovrascrive sempre la 'larghezza massima'.

Qui è an example in codepen, ridimensionare la finestra di anteprima per vedere come funziona.

Controllare l'elemento sottostante, in particolare ridimensionando alla larghezza più piccola possibile e confrontare con altri 2 elementi i1 e i2.

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