CSS <img> относительное позиционирование по сравнению с background-image + background-position
Я работаю на странице миниатюр для галереи изображений. Предварительный просмотр миниатюр сделан как<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%;
не работает.
П.С .: Да, я знаю, что мог бы сделать все миниатюры квадратными, предположив, что это не тот ответ, который я ищу.