Comment étendre Twitter Bootstrap carrousel d'images dynamique de taille moyenne, centré sur les images

Je suis en train d'étendre la valeur par défaut de Bootstrap carrousel d'images à la dynamique de prise en charge des images de taille (500x400 max), centré à la fois horizontalement et verticalement. En outre, je tiens à conserver l'original de la légende de la mise en page, qui ancre la légende au bas de l'image, avec la légende div étendant complètement à travers l'image (mais pas plus loin.)

J'ai mis en place un violon, ce qui est un assez propre mise en œuvre de la valeur par défaut configuration d'Amorçage (il y a seulement 4 des styles supplémentaires à la fin de la section css):

http://jsfiddle.net/rdugan/JFBFU/26/

Je peux assez facilement faire le centrage horizontal et de la légende exigences en ajoutant un 'inline' div autour de l'image et de la légende, et à l'aide de "text-align: center" sur le parent. Cependant, le centrage vertical reste un problème (comme toujours.)

Comme une alternative, j'ai aussi essayé d'utiliser 'display: table-cell' (et le centrage des styles) sur des divs avec des résultats variables - dans certains cas, j'ai loupé le carrousel de la fonctionnalité, tandis que dans d'autres-je accomplir le centrage de l'image, mais de perdre la légende d'ancrage.

Tous les conseils seraient grandement appréciés été cogner ma tête sur celui-ci pendant un certain temps.

OriginalL'auteur Ryan Dugan | 2012-04-06

  1. 17

    Vous pouvez centrer horizontalement avec ces règles:

    .carrousel-inner { text-align: center; }

    .carrousel .item > img { display: inline-block; }

    Pour l'alignement vertical, vous devriez vérifier ce:
    http://www.student.oulu.fi/~laurirai/www/css/moyen/

    Et pour garder le format de l'image sur le redimensionnement vous avez juste à modifier uniquement la largeur ou seule la hauteur de l'image, pas les deux à la fois et il sera redimensionné avec son rapport original.

    OriginalL'auteur RynoRn

  2. 5

    Utiliser le CSS propriété background directement sur la div contenant le carrousel élément:

    Dans le *.html:

    <div class="item" style="background-image: url('[path-to-image].png')">
    <!-- omit the <img> tag -->
    <!-- the rest of the stuff that was in the <div> goes here -->
</div>

    Dans le *.css:

    .carousel .item {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

    Cependant, ce qui semble briser le carrousel, les flèches de navigation.

    Ce travail est pour moi, pour étirer les images bien. Testé dans Chrome,IE7,8,9 , et heureux avec les résultats.
    Dans le CSS n'oubliez pas de régler la hauteur de .item si vos diapositives peut être vu, fixant les flèches de navigation de problème.

    OriginalL'auteur Albert Armea

  3. 0

    essayez d'utiliser cet extrait 

    .carousel-inner > .item > img {
    min-width: 100%;
}

    OriginalL'auteur mustafa-elhelbawy