Centro imagen de gran tamaño en div

He estado tratando de ordenar cómo centrar una imagen de gran tamaño dentro de un div usando solo CSS.

Estamos utilizando un diseño fluido, por lo que el ancho de los contenedores de imágenes varía a medida que lo hace el ancho de página (la altura de div es fija). La imagen se encuentra dentro de un div, con el valor de una sombra de cuadro insertada para que parezca como si estuviera mirando a través de la página en la imagen.

La imagen en sí se ha dimensionado para llenar el div circundante en su valor más amplio posible (el diseño tiene un valor de max-width máximo).

Es bastante fácil de hacer si la imagen es más pequeña que la div circundante:

 margin-left: auto; margin-right: auto; display: block; 

Pero cuando la imagen es más grande que el div, simplemente comienza en el borde izquierdo y está descentrada hacia la derecha (estamos usando overflow: hidden ).

Podríamos asignar un width=100% , pero los navegadores hacen un trabajo pésimo para cambiar el tamaño de las imágenes y el diseño web se centra en imágenes de alta calidad.

¿Alguna idea sobre el centrado de la imagen para que se overflow:hidden corta ambos bordes de manera uniforme?

Prueba algo como esto. Esto debería centrar cualquier elemento grande en el medio vertical y horizontalmente con respecto a su elemento primario, sin importar sus tamaños.

 .parent { position: relative; overflow: hidden; } .child { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; } 

Esta es una Q antigua, pero una solución moderna sin flexbox o posición absoluta funciona así.

 margin-left: 50%; transform: translateX(-50%); 
 .outer { border: 1px solid green; margin: 20px auto; width: 20%; padding: 10px 0; /* overflow: hidden; */ } .inner { width: 150%; background-color: gold; /* Set left edge of inner element to 50% of the parent element */ margin-left: 50%; /* Move to the left by 50% of own width */ transform: translateX(-50%); } 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.

Coloque una gran div dentro de la div, centre esa, y el centro la imagen dentro de esa div.

Esto lo centra horisontally:

HTML:

 

CSS:

 .imageContainer { width: 100px; height: 100px; overflow: hidden; position: relative; } .imageCenterer { width: 1000px; position: absolute; left: 50%; top: 0; margin-left: -500px; } .imageCenterer img { display: block; margin: 0 auto; } 

Demostración: http://jsfiddle.net/Guffa/L9BnL/

Para centrarlo verticalmente también, puedes usar el mismo para el div interior, pero necesitarías la altura de la imagen para colocarlo absolutamente dentro de él.

No use ancho o alto fijo o explícito en la etiqueta de la imagen. En cambio, codifíquelo:

  max-width:100%; max-height:100%; 

ex: http://jsfiddle.net/xwrvxser/1/

Soy un gran fanático de hacer de una imagen el fondo de un div / node, entonces puedes usar el atributo background-position: center para centrarlo independientemente del tamaño de la pantalla

Tarde en el juego, pero encontré que este método es extremadamente intuitivo. https://codepen.io/adamchenwei/pen/BRNxJr

CSS

 .imageContainer { border: 1px black solid; width: 450px; height: 200px; overflow: hidden; } .imageHolder { border: 1px red dotted; height: 100%; display:flex; align-item: center; } .imageItself { height: auto; width: 100%; align-self: center; } 

HTML

 

El ancho y la altura son solo por ejemplo:

 parentDiv{ width: 100px; height: 100px; position:relative; } innerDiv{ width: 200px; height: 200px; position:absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } 

Tiene que funcionar para usted si la parte superior izquierda y la parte superior de su div no son la parte superior e izquierda de la ventana de su pantalla. Esto funciona para mi.

Encontré que esta es una solución más elegante, sin flexión:

 .wrapper { overflow: hidden; } .wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* height: 100%; */ /* optional */ }