Twitter Bootstrap Carousel Non stretching immagini di sfondo

Question

mi piacerebbe la giostra di scalare proporzionalmente l'immagine di sfondo

in questa questione Bootstrap Carousel Image does not scale proportionately si consiglia di lasciare la dimensione esplicita immagine, ma non riesco a capire che cosa significa.

Answer 1

Impostare questo nella vostra HTML

Per ogni elemento img in giostra, è possibile impostare la proprietà width-100% come questo (anche se non dovrebbe essere necessario se la risoluzione naturale è più grande rispetto al controllo):

<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'> 

• normalmente, questa immagine sarebbe troppo piccolo di espandersi completamente, ma 100% scale in su.
• assicurarsi non si dispone del set width o height per ogni pixel di dimensioni

jFiddle

Dal momento che l'immagine sta per andare a schermo intero, si dovrebbe cercare di mettere le mani su una risoluzione che tenterà naturalmente di occupare tutta la larghezza disponibile. Quando il browser deve ridimensionare l'immagine, causerà artefatti.

Answer 2

Ciò che intendono è di omettere larghezza = px e altezza = px dall'immagine (o stili di immagine). Puoi impostare width = "100%" e lasciare l'altezza. Il browser si ridimensionerà proporzionalmente per te.

Answer 3

Prova questa opzione senza gli stili in linea. Basta aggiungere questo al tuo foglio di stile per sovrascrivere lo stile bootstrap.css.

.carousel .item { 
width: 100%; 
/*slider width*/ 
max-height: 600px; 
/*slider height*/ 
} 
.carousel .item img { 
width: 100%; 
/*image width*/ 
}