CSS剪切和绝对定位

Question

我正在使用clip来为相册创建缩略图。不幸的是，只有当元素绝对定位时才能使用clip。如果将其应用于每个img，它们都会以相同的CSS样式堆叠在一起，就像这样。

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

如何相对定位它们？我只想要基本行。

- prestomation

Answer 1

以下是几个选项：

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

- Paul Sweatte

Answer 2

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

- Mike

Answer 3

我不建议使用纯 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指定了一个缩放裁剪（按比例裁剪），而缩略图库则通过一些巧妙的缓存来减少服务器负载。

- Simon

Answer 4

我已经做了相当多的CSS，但我不记得曾经使用过或者甚至看到过clip。误解的CSS Clip表明我不是唯一一个：“CSS clip属性可能是CSS中最少使用的属性之一。这可能是因为没有人真正知道何时使用它，它似乎在Internet Explorer中不被支持，并且有些人使用它不正确。”

所以不要使用clip。这样可以摆脱position:absolute，因为你认识到这不是你想要的。如果我理解你想做什么，只需为图像设置width:和height:值，再加上一些padding，可能像这样：

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

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

- aem

---

“在Internet Explorer中似乎不支持此功能” 在IE中剪贴板可以工作，只是支持有点奇怪。 - Matthew Lock