Twitter Bootstrap: Karussell: Bild vertikal in definierter Höhe Viewport

Question

Ich versuche einen Weg zu finden, um ein Bild innerhalb meines Viewports für das Karussell vertikal zu zentrieren. Momentan funktionieren die Bilder gut und die Größe des Bildes wird auf die Größe des Ansichtsfensters auf der Breite geändert. Aber ich möchte die Mitte des Bildes verwenden und den oberen und unteren Rand des Fotos zuschneiden. Hier

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

und die klein bisschen CSS:

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

Jede Hilfe wird sehr geschätzt. Ich möchte es so, dass, wenn sie ein Foto in der Größe hochladen, es als verwendbar betrachtet werden kann.

Answer 1

Verwenden Sie die folgenden Positionen dies das Bild in der Mitte des Karussells Ansichtsfenster und setzt die Höhe auf 320px

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

Hoffte das Sie aus

Answer 2

geholfen Das könnte Sie werden helfen

Dieses Plugin ausprobieren

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

Und werfen Sie einen Blick hierüber.

Twitter Bootstrap Vertical Thumbnail Carousel

Answer 3

habe ich nur noch ein wenig zu YorickH Antwort

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

Diese bis zum Ende des Bildschirms (oder Container) sicher tje Bilder macht strecken und erhöhe die eine Höhe wenig so die Bilder sehen nicht so gestreckt und zerquetscht aus.

Answer 4

Wenn Sie nicht über die Höhe der Bilder kennen, beim nächsten Arten

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

hier verwenden können, wird #product-detail als Wrapper verwendet Bootstrap-Arten außer Kraft zu setzen.
auch, vergessen Sie nicht, transform zu wendorize.

Answer 5

Ich habe dieses Problem gelöst, indem die Höhe .Item spezifizieren und um das Bild in absolut positioniert machen:

.item { 
height: 300px; 
} 

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

Dieses ein Karussell 300 x Höhe mit Bild vertikal und horizontal zentriert machen.

Answer 6

Ich wollte Bilder in Karussell zum Zentrum entweder

Grigson Antwort hat super funktioniert auf Firefox, aber auf Chrome hat nicht funktioniert. Nach vielen Kämpfen kam ich auf diese Lösung:

Setzen Sie die Bilder als Hintergrund Div.Artikel, weil diese Weise können sie leicht, ohne das Layout positionieren kann:

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

Es kann nicht der beste Weg sein, es zu tun, aber es funktioniert wirklich gut für mich.