css - CSS 剪辑和绝对定位

Question

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

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

然后我怎样才能将它们相对于彼此定位？我只想要基本的行。

score 1 · Accepted Answer

我不会推荐纯 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 指定缩放裁剪（裁剪以匹配纵横比，缩略图库进行了一些非常漂亮的缓存以减少服务器负载。

score 1 · Accepted Answer

这里有几个选项：

您可以使用剪辑属性来防止重叠并同时创建缩略图： http ://www.cssplay.co.uk/menu/clip_gallery.html
您可以使用负边距将图像彼此分开，并溢出以创建缩略图： http ://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

score 0 · Accepted Answer

我已经完成了相当多的 CSS，但我不记得曾经使用过甚至看过剪辑。误解的 CSS Clip暗示我不是唯一一个：“CSS clip 属性必须是 CSS 中使用最少的属性之一。这可能是因为没有人真正知道何时使用它，它似乎不受支持在 Internet Explorer 中，有些人使用不正确。”

所以不要用夹子做。这可以让您摆脱 position: absolute，正如您所认识到的那样，这不是您想要的。如果我了解您要做什么，只需设置图像的宽度：和高度：值，加上一些填充，可能像这样：

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

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

score 0 · Accepted Answer

从 2021 年开始更新。CSS3 引入了clip-path属性，它提供了所需的功能 - 裁剪任何元素。 https://www.w3schools.com/cssref/css3_pr_clip-path.asp

4 回答 4