CODEWITHSUNDEEP
cssthumbnailsclip
prestomation
prestomation

Reputation: 7440

CSS Clip and Absolute Positioning

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.

Upvotes: 7

Views: 9602

Answers (4)

Mike
Mike

Reputation: 983

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

Upvotes: 1

Paul Sweatte
Paul Sweatte

Reputation: 21

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

Upvotes: 2

Simon
Simon

Reputation: 950

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.

Upvotes: 0

aem
aem

Reputation: 3916

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

Upvotes: -1

Related Questions