CSS 剪辑和绝对定位

发布于 2024-07-29 11:07:22 字数 262 浏览 13 评论 0原文

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

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

那么我该如何定位它们的相对位置呢？我只想要基本的行。

原文

I'm using clip to create thumbnails for a gallery. Unfortunately, clip can only be used when an element is absolutely positioned. Applied equally to each img, this of course makes them all sit on each other while using one CSS style, something like this.

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

How can I then position them relative to each other? I just want basic rows.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉薄对峙 2024-08-05 11:07:22

以下是一些选项：

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

回复收藏 0 原文

一场春暖 2024-08-05 11:07:22

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

回复收藏 0 原文

初与友歌 2024-08-05 11:07:22

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

I wouldn't recommend a pure css solution. Have you considered a library such as phpThumb? From there you just use the following css:

.Thumbnails{float:left}

And references to the thumbnails end up looking like this:

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

That line would basically create a 100x100 thumbnail, the zc specifies a zoom crop (crop to match aspect ratio, and the thumbnail library does some pretty nifty caching to reduce server load.

回复收藏 0 原文

北方。的韩爷 2024-08-05 11:07:22

我已经学过相当多的 CSS，但我不记得曾经使用过、甚至没有见过 Clip。被误解的 CSS Clip 表明我不是唯一的一个：“CSS Clip 属性必须是 CSS 中最少使用的属性之一，这可能是因为没有人真正知道何时使用它，Internet Explorer 似乎不支持它，而且有些人错误地使用了它。”

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

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

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

I've done a fair bit of CSS, and I don't remember ever having used or even seen clip. Misunderstood CSS Clip suggests I'm not the only one: "The CSS clip property has to be one of the least used properties in CSS. This is probably because no one really knows when to use it, it doesn't appear to be supported in Internet Explorer, and some people use it incorrectly."

So don't do it with clip. That lets you get rid of position: absolute, which as you recognized isn't what you want. If I understand what you're trying to do, just set width: and height: values for the images, plus some padding, maybe like so:

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

(Eric Meyer's "Cascading Style Sheets: The Definitive Guide" says "The long and convoluted history of clip means that, in current browsers, it acts in inconsistent ways and cannot be relied upon in any cross-browser environment.")

回复收藏 0 原文

~没有更多了~