CSS <img> relative positioning vs. background-image + background-position

Question

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.

Answer 1

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.