CSS 剪辑和绝对定位答案

【问题标题】：CSS Clip and Absolute PositioningCSS 剪辑和绝对定位
【发布时间】：2010-11-12 12:12:45
【问题描述】：

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

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

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

【问题讨论】：

标签： css thumbnails clip

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

【讨论】：

【解决方案2】：

这里有几个选项：

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

"Internet Explorer 似乎不支持" Clip 在 IE 中有效，只是支持有点奇怪

【解决方案4】：

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

【讨论】：