Allineamento dell'immagine al centro all'interno di un div più piccolo

Question

Ho un div con width:100px e height:100px (ad esempio) All'interno di questo, c'è solo un'immagine, per cui l'altezza è sempre fissata a 100px.

Desidero rendere l'immagine orizzontalmente al centro.

Qui ci sono 3 casi: larghezza

1. immagine di è uguale alla larghezza del div, nessun problema
2. la larghezza dell'immagine è inferiore a larghezza di div, posso usare margin: auto qui larghezza
3. l'immagine di è più che div's width

Voglio che la parte centrale dell'immagine sia visibile all'interno del div.

mezzi, se la larghezza di immagine è 120px e la larghezza del div è 100px e overflow:hidden Desidero dell'immagine 10 px di px 110 sia visibile (quindi, la left: 10px e right: 10px di immagine sono nascosti sotto il div)

Ciò è possibile attraverso alcune proprietà CSS? (non so la larghezza dell'immagine, che sta caricando! Quindi voglio che sia dinamica. vogliono anche evitare javascript calcoli laterali per trovare la quantità extra di larghezza e dando margin-left: ve bla bla .. valore)

Inoltre, non posso dare l'immagine come background-image per il div!

Answer 1

See:http://jsfiddle.net/thirtydot/x62nV/ (e without overflow: hidden di vedere facilmente il centraggio)

Questo funziona in tutti i browser, con la possibile eccezione di IE6.

Per .imageContainer > span, il margin-left è derivato dal width, e il width è un numero arbitrario che controlla la larghezza massima che sarà supportata. È possibile impostare width: 10000px; margin-left: -4950px; per supportare immagini veramente ampie, se necessario.

HTML:

<div class="imageContainer"> 
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span> 
</div> 

CSS:

.imageContainer { 
    border: 1px solid #444; 
    overflow: hidden; 
    width: 100px; 
    height: 100px; 
    margin: 15px; 
    text-align: center; 
} 
.imageContainer > span { 
    display: block; 
    width: 1000px; 
    margin-left: -450px; /* -(width-container width)/2 */ 
} 
.imageContainer > span > img { 
    display: inline-block; 
}