Bootstrap di Twitter: Carousel: Verticalmente Centra l'immagine nell'altezza declassata Viewport

Question

Sto tentando di trovare un modo per centrare verticalmente un'immagine all'interno del mio viewport per la giostra. Attualmente le immagini stanno funzionando bene e sta ridimensionando l'immagine alla dimensione del viewport sulla larghezza. Ma voglio usare il centro dell'immagine e ritagliare la parte superiore e inferiore della foto.

Ecco il codice HTML:

<div class="carousel slide hero"> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="img/hero/1.jpg" /> 
     </div> 
     <div class="item"> 
      <img src="img/hero/2.jpg" /> 
     </div> 
     <div class="item"> 
      <img src="img/hero/3.jpg" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href=".hero" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href=".hero" data-slide="next">&rsaquo;</a> 
</div><!-- hero --> 

e la piccola punta di css:

.carousel-inner { 
    height: 320px; 
    overflow: hidden; 
} 

Qualsiasi aiuto è molto apprezzato. Lo voglio in modo che se caricano foto di qualsiasi dimensione può essere considerato utilizzabile.

Answer 1

Usare la seguente, questo posiziona l'immagine al centro della finestra del carosello e imposta l'altezza di 320px

.carousel-inner>.item>img { 
    margin: 0 auto; 
    height: 320px; 
} 

spera che questo ti ha aiutato

Answer 2

questo potrebbe essere aiutare

Prova questo plug-in

https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel

E dai un'occhiata qui.

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

ho aggiunto solo un po 'di YorickH risposta

.carousel-inner>.item>img { 
margin: 0 auto; 
height: 600px; 
width: 100%; 
} 

Questo rende che le immagini tje si estendono fino alla fine dello schermo (o il vostro contenitore), e aumenta l'altezza un po' così le immagini non sembrano così tese e schiacciate.

Answer 4

Se non si conosce l'altezza delle immagini, è possibile utilizzare prossimi stili

 
#product-detail .carousel-inner{ 
    height: 500px; 
} 

#product-detail .carousel-inner>.active{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
#product-detail .carousel-inner>.next, 
#product-detail .carousel-inner>.prev{ 
    top: 50%; 
    transform: translateY(-50%); 
} 

qui, #product-detail viene utilizzato come involucro per ignorare stili bootstrap.
inoltre, non dimenticarti di consultare il transform.

Answer 5

ho risolto questo problema specificando l'altezza .item e rendendo l'immagine in essa posizionato in modo assoluto:

.item { 
height: 300px; 
} 

.item img { 
max-height: 100%; 
max-width: 100%; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
} 

Questo farà un'altezza di 300 x giostra con fotografie centrato verticalmente ed orizzontalmente.

Answer 6

ho voluto centrare le immagini in carosello sia

risposta di Grigson lavorato molto su Firefox, ma non ha funzionato su Chrome. Quindi, dopo un sacco di difficoltà ho trovato questa soluzione:

Metti le immagini come sfondo di div.voce, perché in questo modo si può facilmente posizionare senza disturbare il layout:

.carousel-inner .item { 
    width: 100%; /* Your width */ 
    height: 500px; /* Your height */ 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; /* This also makes sure it fills the whole div */ 
} 

/* add the images to divs */ 
div.item:nth-of-type(1) { 
    background-image: url("../img/carousel-photos/1.jpg"); 
} 

div.item:nth-of-type(2) { 
    background-image: url("../img/carousel-photos/2.jpg"); 
} 

div.item:nth-of-type(3) { 
    background-image: url("../img/carousel-photos/3.jpg"); 
} 

div.item:nth-of-type(4) { 
    background-image: url("../img/carousel-photos/4.jpg"); 
} 

Esso non può essere il modo migliore per farlo, ma funziona molto bene per me.