CSS 相对定位与 background-image + background-position

Question

我正在为图片库制作缩略图页面。缩略图预览作为 <ul> 完成 float <li>具有固定的方形尺寸。

然而，缩略图本身不一定是正方形或相同大小，它们具有它们所代表的大图像的属性。

为了让它看起来不错，我想在正方形中显示缩略图的中心 <li> , 切断等量的左右溢出(参见图 1):

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

I can do this by removing the <img> tag and defining (CSS sprite):

<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%;不起作用。

---

附言:是的，我知道我可以将所有缩略图都变成正方形，假设这不是我要找的答案。

Answer 1

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

假设获取图像大小不是一个选项(我猜你不会问如​​果是的话)，一个变通的想法浮现在脑海中。我现在无法构建测试用例，但朝这个方向可能会起作用:

• 广场内li , 放置一个 div具有您的图像永远无法达到的固定宽度(例如 1000 像素)并给它一个 position: relative; left: -{x}px , x being("div元素的固定宽度"/2) - "方形li元素的宽度"

• 给出 div text-align: center (您可能还需要 align="center" 以适应 IE6)

• 放置 img在div里面

• 它应该居中放置。

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