css - 图像库的裁剪图像问题

Question

我有一个图片库。缩略图的宽度为 240 像素，但高度各不相同。我尝试裁剪图像，使它们都是 150 像素高。

目前我有这个：

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;
 }

这适用于将图像裁剪为 150 像素，但只有顶行的图像是对齐的。其他行上的图像未对齐，因为它们被放置在上一行图像的原始高度的正下方。（裁剪并没有去掉图像的其余部分。图像的其余部分不可见，但它仍然存在，）。我需要在我的 CSS 中添加什么来解决这个问题？

Answer 1

当然，您的代码比您在此处粘贴的内容要复杂一些，但请考虑以下基本 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;  }

这是一个工作示例：

http://jsfiddle.net/3W7Xt/

问候