Come estendere il carosello di immagini Bootstrap su Twitter per immagini dinamicamente dimensionate e centrate

Question

Sto provando ad estendere il carosello di immagini Bootstrap predefinito per supportare immagini di dimensioni dinamiche (500x400 max), centrate sia orizzontalmente che verticalmente. Inoltre, mi piacerebbe mantenere il layout della didascalia originale, che ancorava la didascalia alla parte inferiore dell'immagine, con il div caption che si estende completamente attraverso l'immagine (ma non oltre)

Ho messo insieme un violino , che è un'implementazione abbastanza pulito della configurazione di default Bootstrap (ci sono solo 4 stili aggiuntivi alla fine della sezione css):

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

posso abbastanza facilmente realizzare i requisiti orizzontali di centraggio e didascalia aggiungendo un div 'inline' circostante attorno all'immagine e alla didascalia, e usando 'text-align: center' sul genitore. Tuttavia, il centraggio verticale rimane un problema (come sempre.)

In alternativa, ho anche provato a utilizzare 'display: table-cell' (e gli stili di centraggio associati) su div diverse con risultati variabili - in alcuni Caso in cui incasello la funzionalità del carosello, mentre in altri compio il centraggio dell'immagine, ma perdo l'ancoraggio della didascalia.

Qualsiasi suggerimento sarebbe molto apprezzato - mi ha sbattuto la testa su questo per parecchio tempo.

Answer 1

È possibile centrare orizzontalmente con queste regole:

.carousel-interno {text-align: center; }

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

per l'allineamento verticale si dovrebbe verificare questo: http://www.student.oulu.fi/~laurirai/www/css/middle/

E per mantenere le proporzioni dell'immagine sul ridimensionamento è sufficiente modificare solo la larghezza o solo l'altezza dell'immagine non sia a tempo e verrà ridimensionato con il suo rapporto originale.

Answer 2

utilizzare la proprietà CSS sfondo direttamente sul div contenente l'elemento carosello:

Nella * .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> 

Nella * .css:

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

Tuttavia, questo sembra spezzare le frecce di navigazione del carosello.

Answer 3

tenta di utilizzare questo frammento

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