Estoy trabajando en una página de miniaturas para una galería de imágenes. Las vistas previas en miniatura se realizan como<ul> con flotante<li> con un tamaño fijo y cuadrado.

Las imágenes en miniaturasí mismos sin embargo, no son necesariamente cuadrados o del mismo tamaño, tienen las propiedades de las imágenes grandes que representan.

Para que se vea bien, me gustaría mostrar el centro de la imagen en miniatura en el cuadrado<li>, cortando una cantidad igual de desbordamiento hacia la izquierda y hacia la derecha (verhigo. 1):

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

Puedo hacer esto quitando el<img> etiqueta y definición (CSS sprite):

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

Esto funciona y se ve bien, pero solo cuando tienes CSS habilitado. Además, no es muy semántico, ya que la imagen no se muestra<img> etiqueta.

Cuando uso un<img> etiqueta en lugar del interior<div> arriba, las cosas se parecen más ahigo. 2.

¿Cómo movería el<img> a través de CSS para estar siempre centrado, sin importar cuán ancha sea la imagen en miniatura en realidad. Supongo que algún tipo de posicionamiento relativo podría hacerlo, pero un ingenuoposition: relative; left: -50%; No funciona.

P.S .: Sí, sé que podría hacer que todas las miniaturas cuadren, suponga que esta no es la respuesta que estoy buscando.