Question

I have an image gallery. The thumbnails are 240px in width, but the heights vary. I tried cropping the images so that they are all 150 pixels high.

At the moment I’ve got this:

HTML

<div data-category="category1">
<a href="image1.jpg" rel="lightbox[on]" title="">
<img src="image1.jpg" width="" height="" />
</a></div>

<div data-category="category1">
<a href="image2.jpg" rel="lightbox[on]" title="">
<img src="image2.jpg" width="" height="" />
</a></div>

<div data-category="category1">
<a href="image3.jpg" rel="lightbox[on]" title="">
<img src="image3.jpg" width="" height="" />
</a></div>

<div data-category="category2">
<a href="image4.jpg" rel="lightbox[on]" title="">
<img src="image4.jpg" width="" height="" />
</a></div>

<div data-category="category2">
<a href="image5.jpg" rel="lightbox[on]" title="">
<img src="image5.jpg" width="" height="" />
</a></div>

<div data-category="category2">
<a href="image6.jpg" rel="lightbox[on]" title="">
<img src="image6.jpg" width="" height="" />
</a></div>

CSS

 .gallery {
 position:relative;
 }

 .gallery > div {
 position:absolute;
 }

 .gallery > div > a > img {
 position:absolute;
 top: 0;
 left: 0;
 clip: rect(0px,240px,150px,0px);
 overflow: hidden;
 border:none;
 }

This works with cropping the images to 150px, but only the images on the top row are aligned. The images on the other rows are not aligned because they are being placed directly below the original heights of the images on the row above. (The cropping doesn’t get rid of the rest of the image. The rest of the image is not visible, but it’s still there,). What do I need to add to my CSS to sort this out?

Answer 1

Surely your code is a bit more complex of what you paste here, but please take in consideration this base css:

.gallery {  position: relative;  }
.gallery > div {  float: left;  }
.gallery > div > a {  max-height: 150px;  width: 240px;  overflow: hidden;  display: inline-block;  }
.gallery > div > a > img {  border: none;  }

Here a working example:

http://jsfiddle.net/3W7Xt/

Regards