CSS剪辑和绝对定位

Question

我正在使用剪辑为图库创建缩略图。不幸的是，剪辑只能在元素绝对定位时使用。同样应用于每个img，这当然会使它们在使用一种CSS样式时彼此坐在一起，像这样。

.Thumbnails { 
    position: absolute; 
    height: 105px; 
    clip: rect(50px 218px 155px 82px); 
} 

我该如何将它们相对放置？我只想要基本的行。

Answer 1

我不会推荐纯css解决方案。你有没有考虑过像phpThumb这样的图书馆？从那里，你只需要使用下面的CSS：

.Thumbnails{float:left} 

和引用缩略图最后看起来像这样：

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" /> 

这条线基本上会创建一个100x100的缩略图，该ZC指定变焦作物（裁剪搭配宽高比和缩略图库做了一些非常漂亮的缓存来降低服务器负载

Answer 2

我已经做了一些公平的CSS，我不记得曾经使用甚至看过剪辑。 Misunderstood CSS Clip建议我不是唯一一个：“CSS剪辑属性必须是CSS中最少使用的属性之一，这可能是因为没有人真正知道何时使用它，它似乎并未在Internet中受支持资源管理器，有些人使用不正确。“

所以不要用剪辑来做。这可以让你摆脱位置：绝对的，正如你所认识的不是你想要的。如果我理解你想要做什么，只要设置宽度和高度：对于图像值，加上一些填充，也许像这样：

.Thumbnails { 
    width: 100px; 
    height: 100px; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

（Eric Meyer的“层叠样式表权威指南” “漫长而复杂的剪辑历史意味着，在目前的浏览器中，它的行为方式不一致，不能在任何跨浏览器环境中依赖。”）

Answer 3

这里有几个选项：

1. 可以使用夹属性，以防止重叠，并在同一时间创建缩略图： http://www.cssplay.co.uk/menu/clip_gallery.html

2. 可以使用负利润率的图像彼此分开，并且溢出来创建缩略图： http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image