0

画像ギャラリーがあります。サムネイルの幅は 240px ですが、高さはさまざまです。すべての画像の高さが 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 に何を追加する必要がありますか?

4

1 に答える 1

0

確かに、あなたのコードはここに貼り付けたものよりも少し複雑ですが、このベース 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/

よろしく

于 2012-11-05T23:21:29.573 に答える