CSS относительное позиционирование по сравнению с background-image + background-position

Я работаю над страницей эскизов для галереи изображений. Предварительный просмотр миниатюр выполняется в виде

с плавающим
• с фиксированным квадратным размером.

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

  Чтобы он выглядел красиво, я хотел бы отобразить центр миниатюрного изображения в квадрате

• , отсекая равное количество переполнения слева и справа (см. рис. 1 ):

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

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

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

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

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

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

  ---

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