html - Alineando imagen para centrar dentro de un div más pequeño

css

Question

Tengo un div con width:100px y height:100px (por ejemplo) Dentro de eso, solo hay una imagen, para la cual la altura siempre está fija a 100px .

Quiero hacer la imagen horizontalmente en el centro.

Aquí hay 3 casos:

1. el ancho de la imagen es igual al ancho de div, no hay problemas
2. el ancho de la imagen es menor que el ancho de div, puedo usar el margin: auto aquí
3. el ancho de la imagen es más que el ancho de div

Quiero que la parte central de la imagen sea visible dentro de la div.

significa, si el ancho de la imagen es de 120px y el ancho de la div es de 120px y overflow:hidden Quiero que el 10º px de la imagen sea visible (entonces, la left: 10px y la right: 10px de la imagen están ocultos debajo del div)

¿Es esto posible a través de alguna propiedad CSS? (¡No sé el ancho de la imagen que se está cargando! Así que quiero que sea dinámico. También quiero evitar los cálculos laterales de javascript para encontrar la cantidad extra de ancho y dar margin-left: -ve valor bla bla ..)

Además, no puedo dar la imagen como imagen de background-image para el div!

Answer 1

Consulte: http://jsfiddle.net/thirtydot/x62nV/ (y sin overflow: hidden para ver fácilmente el centrado)

Esto funcionará en todos los navegadores, con la posible excepción de IE6.

Para .imageContainer > span , el margin-left se deriva del width , y el width es un número arbitrario que controla el ancho máximo de la imagen que se admitirá. Usted podría establecer el width: 10000px; margin-left: -4950px; width: 10000px; margin-left: -4950px; para soportar imágenes realmente amplias, si es necesario.

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;
}