html - subir - Centre una imagen grande de tamaño desconocido dentro de un div más pequeño con desbordamiento oculto

insertar imagen en div

Question

Me gustaría centrar un img dentro de un div sin javascript y sin imágenes de fondo .

Aquí hay un código de ejemplo

<div> 
    <img src="/happy_cat.png"/> 
</div>

• No sé el tamaño de la img y debería poder exceder el ancho de la imágen
• No sé el ancho del div principal (es 100%)
• El div principal tiene una altura fija
• La imagen es más grande que el elemento principal y el elemento principal tiene un desbordamiento: oculto
• Solo es necesario admitir navegadores modernos

Resultado deseado. (Ignore las opacidades, etc., solo observe el posicionamiento).

Sé que esto se puede hacer fácilmente con imágenes de fondo, pero esa no es una opción para mí. También podría usar javascript, pero parece una forma muy pesada de lograr esto.

¡Gracias!

Jack

Answer 1

¿Qué tal esto?

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

Esto supone que el div principal está posicionado relativamente. Creo que esto funciona si quieres que el .img esté relativamente posicionado en lugar de absolutamente. Simplemente elimine la position: absolute y cambie arriba / izquierda a margin-top y margin-left .

Probablemente quiera agregar el soporte del navegador con transform , -moz-transform etc.

Answer 2

Esto siempre es un poco complicado y hay muchas soluciones por ahí. Encuentro que la mejor solución es la siguiente. Esto lo centra tanto vertical como horizontalmente.

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

Ver violín

técnica ligeramente diferente: Fiddle

Answer 3

Gracias a todos por su ayuda. Voy a considerar esto inalcanzable solo en CSS.

Pasaré a una solución jQuery. Aquí hay un poco de [pseudo] código para los interesados.

Iba a renunciar a una solución CSS, pero parece que se puede hacer (ver respuesta aceptada). Aquí está la solución de JS con la que iba a ir.

var $img = $(''img''),
    w = $img.width();

$img.css({marginLeft: -w});

Y el css que lo acompaña

img{
  position:absolute;
  left:50%;
}

Answer 4

Pregunta anterior, nueva respuesta:

Cuando la imagen es más grande que el div de envoltura, un text-align: center o margin: auto no va a funcionar. Pero si la imagen es más pequeña, las soluciones con un posicionamiento absoluto o un margen izquierdo negativo producirán efectos extraños.

Entonces, cuando el tamaño de la imagen no se conoce de antemano (como en un CSM) y puede ser más grande o más pequeña que el div de envoltura, hay una solución elegante de CSS3 que sirve para todos los propósitos:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

Tenga en cuenta que, dependiendo de otras reglas en su hoja de estilo, es posible que deba agregar ancho: automático y / o ancho máximo: ninguno al img.

Answer 5

Sé que esto es viejo, pero también se me ocurrió una solución de CSS pura muy similar a la anterior.

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

Answer 6

Simplemente inicialice la posición de su imagen de la siguiente manera.

HTML:

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS:

#img {
    left: 0;
    right: 0;
}

O mira con un margin: auto;

Esto es para alineación horizontal. Para alinearlo verticalmente, puede hacer una display: table-cell; a su <div> an luego vertical-align: middle; pero no es una buena práctica porque tu <div> no es una tabla.