Tengo un div con width:100px y height:100px (decir)
Dentro de eso, no es sólo una imagen, para que la altura es siempre fija a 100px.

Quiero hacer la imagen horizontalmente centro.

Aquí hay 3 casos:

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

Quiero la parte central de la imagen para ser visible dentro de la div.

significa que, si la anchura de la imagen es 120px y como el ancho del div es 100px y overflow:hidden
Quiero la imagen de 10 px 110 px a ser visible (por lo tanto, la left: 10px y right: 10px de imagen está oculta debajo de la div )

Es esto posible a través de alguna propiedad CSS?
(No sé el ancho de la imagen que se carga! así que quiero que sea dinámico.
También quieren evitar el javascript del lado de los cálculos para encontrar la cantidad extra de ancho y dando margin-left: -ve valor bla bla.. )

También, no le puedo dar la imagen como background-image para el div!

OriginalEl autor SuryaPavan | 2011-11-16

1 Comentario

  1. 29

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

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

    Para .imageContainer > span, el margin-left se deriva de la width, y el width es un número arbitrario que controla la máxima anchura de la imagen que será compatible. Usted puede establecer el width: 10000px; margin-left: -4950px; para apoyar realmente muchas imágenes, 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;
    }
    Gracias @thirtydot! mediante la adición de estos por debajo de los 2 propiedades, soy capaz de lograr vertical align center también para las imágenes pequeñas (en comparación con los div) .imageContainer{ line-height:100px; } .imageContainer > span > img { vertical-align:middle; } 🙂
    Gran respuesta, buen uso de jsfiddle 😀
    Impresionante respuesta!!

    OriginalEl autor thirtydot

Dejar respuesta

Please enter your comment!
Please enter your name here