Eu tenho tentado classificar como centrar uma imagem superdimensionada dentro de uma div usando somente css.

Estamos usando um layout fluido, portanto, a largura dos contêineres de imagem varia conforme a largura da página (a altura da div é fixada). A imagem fica dentro de uma div, com o valor de uma caixa de sombra embutida para aparecer como se você estivesse olhando a página para a imagem.

A própria imagem foi dimensionada para preencher o div circundante com o maior valor possível (o design tem ummax-width valor).

É muito fácil de fazer se a imagem for menor que o div adjacente:

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

Mas quando a imagem é maior que a div, ela simplesmente começa na borda esquerda e está fora do centro para a direita (estamos usandooverflow: hidden).

Podemos atribuir umwidth=100%, mas os navegadores fazem um péssimo trabalho de redimensionamento de imagens e os centros de design da Web em torno de imagens de alta qualidade.

Alguma idéia de centralizar a imagem de modo queoverflow:hidden corta as duas bordas uniformemente?