CSS <img>相对定位与背景图像+背景位置

Question

我正在制作图片库的缩略图页面.缩略图预览<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>无论缩略图实际有多宽,我如何将via CSS 移动到始终居中？我假设某种相对定位可能会这样做,但天真position: relative; left: -50%;无效.

---

PS:是的,我知道我可以将所有缩略图都放到正方形,假设这不是我正在寻找的答案.

Answer 1

我想到了CSSclip属性，但我认为在不知道图像尺寸的情况下不可能用它实现居中的正方形。最干净的方法可能是在服务器端找出缩略图的尺寸，然后clip在其上应用绝对像素值，使其变为正方形。

假设获取图像尺寸不是一个选项（我猜你不会问是否可以），我会想到一个解决方法。我现在无法构建测试用例，但这个方向的某些东西可能会起作用：

• 在 square 内部li，放置一个固定宽度的 a div，该宽度永远不会被图像达到（例如 1000 像素），并给它一个position: relative; left: -{x}px, x being ("div 元素的固定宽度"/2) - "正方形 li 元素的宽度”

• 给出div text-align: center（您可能还需要align="center"满足 IE6 的要求）

• 将img里面的div

• 它应该居中放置。

不漂亮，但也不是太可怕。