Estou trabalhando em uma página de miniaturas para uma galeria de imagens. As visualizações em miniatura são feitas como um<ul> com flutuante<li> com um tamanho quadrado fixo.

As imagens em miniaturasi mesmos no entanto, não são necessariamente quadrados ou do mesmo tamanho, eles têm as propriedades das imagens grandes que representam.

Para que fique bonito, gostaria de exibir o centro da imagem em miniatura no quadrado<li>, cortando uma quantidade igual de estouro à esquerda e à direita (consulteFIG. 1):

 +..+---------+..+                +---------+....+
 ://|  /\_/\  |//:                |     /\_/|////:
 ://| ( o.o ) |//:                |    ( o.o|////:
 ://|  > ^ <  |//:                |     > ^ |////:
 ://| {o___o} |//:                |    {o___|////:
 +..+---------+..+                +---------+....+
          (fig. 1)                        (fig. 2)

Eu posso fazer isso removendo o<img> tag e definição (sprite CSS):

<li style="width: x; height: x; overflow: hidden;">
   <div style="background: url(...) no-repeat center center;"/>
</li>

Isso funciona e parece bom, mas apenas quando você tem o CSS ativado. Além disso, não é muito semântico, pois a imagem não é exibida por um<img> etiqueta, rótulo, palavra-chave.

Quando eu uso um<img> tag no lugar do interior<div> acima, as coisas parecem maisFIG. 2.

Como eu mudaria o<img> via CSS para sempre estar centralizado, independentemente da largura da imagem em miniatura? Presumo que algum tipo de posicionamento relativo possa fazê-lo, mas um ingênuoposition: relative; left: -50%; não funciona.

P.S .: Sim, eu sei que poderia fazer todas as miniaturas quadradas, suponha que essa não seja a resposta que estou procurando.