CSS< img>相对定位与背景图像+背景位置 [英] CSS <img> relative positioning vs. background-image + background-position

问题描述

我正在处理图片库的缩图页面。缩略图预览以具有固定，正方形大小的浮动< li> 的< ul> / p>

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

为了使它看起来很漂亮我想在方形< li> 中显示缩略图的中心，等于左右溢出量（参见图1 ）：

 
 + .. + ------- + .. + + --------- + .... + 
：// | / \_ / \ | //：| / \_ / | ////：
：// | （o.o）| //：| （oo | ////：
：// |> ^< | //：|> ^ | ////：
：// | {o___o} | //： | {o ___ | ////：
 + .. + --------- + .. + + --------- + .... + 
 （图2）
 

我可以通过删除< img> / code>标签和定义（CSS sprite）：

 < li style =width：x; height： x; overflow：hidden;> 
< div style =background：url（...）no-repeat center center;/> 
< / li> 
  

这个工作和看起来不错，但只有当你启用了CSS。它不是很语义，因为图像不显示< img>

/ code>标签代替上面的内部< div> ，情况看起来更像图2 。

如何通过CSS将< img> 移动到始终居中，无论缩略图的实际宽度？我假设某种相对定位可能做到，但是一个天真的 position：relative;

---

PS：是的，我知道我可以让所有的缩略图正方形，假设这不是我正在寻找的答案。

解决方案

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.

这篇关于CSS< img>相对定位与背景图像+背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！