Twitter Bootstrap: Karuzela: obraz pionowo w centrum w zdefiniowanej wysokości Viewport

Question

Próbuję znaleźć sposób pionowego wyśrodkowania obrazu wewnątrz mojej rzutni dla karuzeli. Obecnie obrazy działają poprawnie i zmieniają rozmiar obrazu do rozmiaru rzutni na szerokość. Ale chcę użyć środka obrazu i przyciąć górną i dolną część zdjęcia.

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

i mały kawałek CSS:

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

Każda pomoc jest mile widziana. Chcę, aby przesyłane zdjęcia w dowolnym rozmiarze można było uznać za użyteczne.

Answer 1

użyć następujących, to ustawia obraz na środku rzutni karuzeli i ustawia wysokość do 320px

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

nadzieję, że to pomogło cię

Answer 2

może to być pomóc

Wypróbuj tę wtyczkę

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

I spójrz tutaj.

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

dodałem tylko trochę do YorickH odpowiedź

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

Daje to pewność, obrazy TJE rozciągnąć do końca ekranu (lub pojemnika) i zwiększa wysokość trochę tak obrazy nie wyglądają tak rozciągnięte i spłaszczone.

Answer 4

Jeśli nie wiem wysokość obrazu, można użyć następujące style

 
#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%); 
} 

tutaj, #product-detail służy jako owijki zastąpić style startowej.
również, nie zapomnij o wendorize transform.

Answer 5

mogę rozwiązać ten problem, określając wysokość .Item i wytwarzania obrazu w nim całkowicie umieszczony:

.item { 
height: 300px; 
} 

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

Spowoduje to, że karuzela 300 x wysokość obrazami wyśrodkowany w pionie i w poziomie.

Answer 6

Chciałem centrum obrazy w karuzeli albo

odpowiedź Grigson pracował dobrze na Firefox, ale nie działa na Chrome. Więc po wielu zmaganiach wymyśliłem to rozwiązanie:

Umieść obrazy jako tło div.poz, ponieważ w ten sposób można łatwo umieścić je bez naruszania układu:

.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"); 
} 

To nie może być najlepszym sposobem, aby to zrobić, ale działa bardzo dobrze dla mnie.