He estado tratando de resolver cómo centrar una imagen de gran tamaño dentro de una división usando css solamente.

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

La imagen en sí ha sido dimensionada para llenar la división circundante en su valor más amplio posible (el diseño tiene unmax-width valor).

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

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

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

Podríamos asignar unwidth=100%, pero los navegadores hacen un pésimo trabajo al redimensionar las imágenes y los centros de diseño web en torno a imágenes de alta calidad.

Cualquier idea sobre centrar la imagen para queoverflow:hidden corta ambos bordes uniformemente?