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

这适用于将图像裁剪为150px，但只有顶行上的图像对齐。其他行上的图像未对齐，因为它们直接放置在上一行图像的原始高度下方。（裁剪不会消除图像的其余部分。图像的其余部分不可见，但它仍然存在，）。我需要添加什么来对我的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/

此致

图像库的裁剪图像问题

1 个答案: