CSS Clip and Absolute Positioning

css thumbnails clip
prestomation picture prestomation · Jul 21, 2009 · Viewed 8k times · Source

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.

Answer

Simon picture Simon · Jul 21, 2009

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.

Related questions

How can I set height for Twitter bootstrap thumbnails?

I’m having trouble setting up the Thumbnail module for my personal website. I use twitter bootstrap (3.0) for my project and I can’t finish setting up the Thumbnail module. The width is okay, but I can’t set the …

Read More
Pure CSS image thumbnails

I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall). What …

Read More
Twitter Bootstrap thumbnail caption to the right

How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited. <…

Read More