CSS 剪辑和绝对定位
我正在使用 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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
以下是一些选项:
您可以使用 Clip 属性来防止重叠并同时创建缩略图:
http://www.cssplay.co.uk/menu/clip_gallery.html
您可以使用负边距将图像彼此分开,并使用溢出来创建缩略图:
http://cssglobe.com/post /6089/3-easy-and-fast-css-techniques-for-faux-image
Here are a few options:
You can use the clip property to prevent the overlap and create thumbnails at the same time:
http://www.cssplay.co.uk/menu/clip_gallery.html
You can use negative margins to separate the images from each other, and overflow to create the thumbnails:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
从 2021 年开始更新。
CSS3 引入了
clip-path
属性,它提供了所需的功能 - 剪切任何元素。https://www.w3schools.com/cssref/css3_pr_clip-path.asp
Update from 2021.
CSS3 has introduced
clip-path
property, which provides the desired functionality - clipping any element.https://www.w3schools.com/cssref/css3_pr_clip-path.asp
我不会推荐纯 css 解决方案。 您是否考虑过像 phpThumb 这样的库? 从那里你只需使用以下 css:
对缩略图的引用最终看起来像这样:
该行基本上会创建一个 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:
And references to the thumbnails end up looking like this:
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.
我已经学过相当多的 CSS,但我不记得曾经使用过、甚至没有见过 Clip。 被误解的 CSS Clip 表明我不是唯一的一个:“CSS Clip 属性必须是 CSS 中最少使用的属性之一,这可能是因为没有人真正知道何时使用它,Internet Explorer 似乎不支持它,而且有些人错误地使用了它。”
所以不要用剪辑来做。 这可以让你摆脱position:absolute,正如你所认识到的那样,这不是你想要的。 如果我明白你想要做什么,只需设置图像的 width: 和 height: 值,加上一些填充,也许像这样:
(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:
(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.")