Я работаю на странице миниатюр для галереи изображений. Предварительный просмотр миниатюр сделан как<ul> с плавающей<li> с фиксированным, квадратным размером.

Миниатюры изображенийсамих себя однако они не обязательно квадратные или одинакового размера, они имеют свойства больших изображений, которые они представляют.

Чтобы это выглядело хорошо, я бы хотел отобразить центр миниатюрного изображения в квадрате.<li>, срезая одинаковое количество перелива влево и вправо (см.Инжир. 1):

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

Я могу сделать это, удалив<img> тег и определение (CSS-спрайт):

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

Это работает и выглядит красиво, но только если у вас включен CSS. Плюс это не очень семантически, так как изображение не отображается<img> тег.

Когда я использую<img> тег на месте внутреннего<div> выше, вещи больше похожи наИнжир. 2.

Как бы я переместил<img> с помощью CSS, чтобы всегда быть в центре, независимо от того, насколько широко на самом деле уменьшенное изображение? Я предполагаю, что какое-то относительное позиционирование может сделать это, но наивноposition: relative; left: -50%; не работает.

П.С .: Да, я знаю, что мог бы сделать все миниатюры квадратными, предположив, что это не тот ответ, который я ищу.