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

以下是一些选项：

1. 您可以使用clip属性来防止重叠并同时创建缩略图： http://www.cssplay.co.uk/menu/clip_gallery.html

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

Answer 3

我做了很多CSS，我不记得曾经使用过甚至看过剪辑。 Misunderstood CSS Clip表明我不是唯一一个：“CSS剪辑属性必须是CSS中使用最少的属性之一。这可能是因为没有人真正知道何时使用它，它似乎不会在Internet Explorer中受支持，有些人使用它不正确。“

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

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

（Eric Meyer的“层叠样式表：权威指南”说：“剪辑的漫长而复杂的历史意味着，在当前的浏览器中，它以不一致的方式起作用，并且在任何跨浏览器环境中都不能依赖它。”）