CSS Clip and Absolute Positioning

Question

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.

Rayleigh

Answer 1

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.

Whatnot

Answer 2

Here are a few options:

1. 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

2. 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

Puente

Answer 3

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

Particle

Answer 4

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.")

Stripling

"it doesn't appear to be supported in Internet Explorer" Clip works in IE, just that the support is a little weird – Nostomania