Question

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

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

为了让它看起来不错，我想在方形<li>中显示缩略图的中心，左右切断相同数量的溢出（参见 fig.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 。

无论缩略图实际有多宽，我如何通过CSS将<img>移动到始终居中？我假设某种相对定位可能会这样做，但天真的position: relative; left: -50%;不起作用。

P.S。：是的，我知道我可以将所有缩略图放到正方形，假设这不是我正在寻找的答案。

Answer 1

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

假设获取图像大小不是一种选择（我认为你不会问它是不是），我想到了一个解决方法。我现在无法构建测试用例，但是在这个方向可能工作：

在广场li内，放置一个div，其宽度固定，图片永远无法达到（例如1000像素），并为其position: relative; left: -{x}px，{ {1}}是（“div元素的固定宽度”/ 2） - “方形li元素的宽度”
提供x div（您可能还需要text-align: center来迎合IE6）
将align="center"放在img
它应该位于中心位置。

不漂亮，但也不过分可怕。

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

1 个答案: