Twitter Bootstrap: Carrousel: verticalement Centrer l'image dans la hauteur défiée Viewport

J'essaie de trouver un moyen de verticially centre d'une image à l'intérieur de ma fenêtre d'affichage pour le carrousel. Actuellement, les images sont bien fonctionner et c'est le redimensionnement de l'image à la taille de la fenêtre d'affichage sur la largeur. Mais je veux utiliser le centre de l'image et de la culture le haut et le bas de la photo.

Voici le code 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 -->

et le petit peu de css:

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

Toute aide est grandement appréciée. Je veux que si ils téléchargent n'importe quelle taille de la photo, il peut être considéré comme utilisable.

source d'informationauteur David Leonard

  1. 15

    J'ai résolu ce problème en spécifiant l' .élément de la hauteur et de faire de l'image en position absolue:

    .item {
height: 300px;
}

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

    Cela fera un carrousel de 300px de hauteur avec des images centré verticalement et horizontalement.

  2. 6

    Si vous ne connaissez pas la hauteur des images, vous pouvez utiliser la prochaine styles

    #produit-détail .carrousel-inner{ 
height: 500px; 
} 

#produit-détail .carrousel-intérieur>.active{ 
position: relative; 
top: 50%; 
transformer: translateY(-50%); 
} 
#produit-détail .carrousel-intérieur>.ensuite, 
#produit-détail .carrousel-intérieur>.prev{ 
top: 50%; 
transformer: translateY(-50%); 
}

    ici, #product-detail est utilisé comme un wrapper pour remplacer bootstrap styles.

    aussi, n'oubliez pas de wendorize transform.

  3. 2

    Utiliser, cela place l'image au centre de la fenêtre d'affichage carrousel et des ensembles
    la hauteur de 320px

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

    Espérons que cela vous a aidé à sortir

  4. 1

    Ce Pourrait être vous aider à

    Essayer ce Plugin

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

    Et de prendre un coup d'oeil ici.

    Twitter Bootstrap Verticale Carrousel Miniature

  5. 0

    J'ai ajouté un peu YorickH réponse

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

    Cela permet de s'assurer tje images de l'étirer à la fin de l'écran (ou votre conteneur), et augmente la hauteur un peu de sorte que les images ne regardez pas si tendu et écrasée.

  6. 0

    J'ai voulu centrer les images en manège soit

    grigson réponse fonctionnait très bien sur firefox, mais ne fonctionne pas sur Chrome. Donc, après avoir beaucoup lutté, j'ai trouvé cette solution:

    Mettre les images comme arrière-plan de div.élémentparce que de cette façon, vous pouvez facilement positionner sans perturber la mise en page:

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

    Il peut ne pas être la meilleure façon de le faire, mais il fonctionne vraiment bien pour moi.