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

我正在为图像库制作缩略图。缩略图预览以固定方形大小的浮动

作为

进行

但是，缩略图图像本身不一定是正方形或相同大小，它们具有它们所表示的大型图像的特性

为了使它看起来更美观，我想在正方形中显示缩略图的中心，从左到右切断等量的溢出（见图1）：

+..+---------+..+ +---------+....+ ://| /\_/\ |//: | /\_/|////: ：//（o.o）/：/（o.o）/： ://| > ^ < |//: | > ^ |////: /：{o_uuuuuuo}}/：{o_uuuuuuuuuu124;//： +..+---------+..+ +---------+....+ （图1）（图2） 我可以通过删除

标记并定义（CSS sprite）来实现这一点：

这很有效，看起来也很不错，但只有在启用了CSS的情况下。另外，由于图像不是通过

标记显示的，所以它的语义也不是很强

当我使用

标记来代替上面的内部

时，事情看起来更像图2

我如何通过CSS移动

，使其始终居中，无论缩略图实际有多宽？我假设某种相对定位可以做到这一点，但天真的

位置：相对；左：-50%；

不起作用

---

旁白：是的，我知道我可以把所有的缩略图都做成正方形，假设这不是我想要的答案。

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

剪辑

，使其成为正方形

假设获取图像大小不是一个选项（我想你不会问它是否是），一个解决方案的想法浮现在脑海中。我现在无法构建测试用例，但在这个方向上可能会有一些工作：

• 在正方形

  li

  内，放置一个固定宽度的

  div

  ，该宽度是图像永远无法达到的（例如1000像素），并给它一个

  位置：相对；左：-{x}px

  ，

  x

  是（“div元素的固定宽度”/2）-“正方形li元素的宽度”

• 给出

  div

  text align:center

  （您可能还需要

  align=“center”

  来满足IE6的要求）

• 将

  img

  放入

  div

• 它应该放在中间

---

不漂亮，但也不太可怕。

+1仅就伟大的ascii艺术而言：）我想你在定义这个时不知道每个缩略图的宽度？哈哈：）ascii艺术做得很好！@Pekka:不，我不知道。我可以找到，但通用解决方案更具吸引力。

x

(“div元素的固定宽度”/2）-“li元素的宽度”"+1这与我已经存在的标记非常匹配。我甚至不需要再添加一个

。但是，唉，我遇到了IE7/8的问题，IE7/8没有正确隐藏溢出。：-\Ha！成功！：-）显然，这与提供容器布局有关。将

位置：相对；

添加到squarere

容器使溢出在IE上正确消失。谢谢！：-）PS:它必须是“减去方形li元素宽度的一半”。 +..+---------+..+ +---------+....+ ://| /\_/\ |//: | /\_/|////: ://| ( o.o ) |//: | ( o.o|////: ://| > ^ < |//: | > ^ |////: ://| {o___o} |//: | {o___|////: +..+---------+..+ +---------+....+ (fig. 1) (fig. 2)

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