CSS 剪辑属性想到，但我不认为有可能实现一个中心的广场，它不知道图像的尺寸。最简洁的方法可能是在服务器端找到缩略图的尺寸，然后应用一个剪辑与绝对像素值，因此它变成正方形。

假设获取图片大小不是一个选项（我收集你不会问是否），一个解决方法的想法。我现在无法建立测试用例，但在这个方向上可能会 有效：

• 在方块 li 中，放置一个固定宽度的 div ，您的图片将永远不会到达像素），并给它一个 position：relative; left： - {x} px ， x 是（div元素的固定宽度/ 2） - 元素




• 提供 div text-align：center （您可能还需要 align =center以适应IE6）




• 将 img 放置在 div 内

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

I'm working on a thumbnail page for an image gallery. Thumbnail previews are done as an <ul> with floating <li> with a fixed, square size.

The thumbnails images themselves however are not necessarily square or same size, they have the properties of the large images they represent.

To make it look nice I'd like to display the center of the thumbnail image in the square <li>, cutting off an equal amount of overflow left and right (see fig. 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>

This works and looks nice but only when you have CSS enabled. Plus it's not very semantic since the image is not displayed by an <img> tag.

When I use an <img> tag in place of the inner <div> above, things look more like in fig. 2.

How would I move the <img> via CSS to always be centered, no matter how wide the thumbnail image actually is? I assume some sort of relative positioning might do it, but a naïve position: relative; left: -50%; does not work.

---

P.S.: Yes, I know that I could make all the thumbnails square, assume that this is not the answer I'm looking for.

The CSS clip property comes to mind but I don't think it's possible to achieve a centered square with it without knowing the image's dimensions. The cleanest way would probably be finding out the thumbnail's dimensions on server side, and then apply a clip with absolute pixel values on it so it becomes square.

Assuming getting the image sizes isn't an option (I gather you wouldn't be asking if it were), one workaround idea comes to mind. I can't build a test case right now, but something in this direction might work:

• Inside the square li, place a div with a fixed width that will never be reached by your image (e.g. 1000 pixels) and give it a position: relative; left: -{x}px, x being ("the fixed width of the div element" / 2) - "width of the square li element"

• Give the div text-align: center (You might also need align="center" to cater for IE6)

• Place the img inside the div

• It should be positioned centered.

not pretty, but not overly horrible, either.