0

私のギャラリーでは、サムネイルの幅は240ピクセルですが、高さは異なります。サムネイル画像をすべて150ピクセルの高さにトリミングする方法はありますか？

現時点で私はこれを持っています：

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

これは機能しますが、すべて整列されているため、一番上の行の画像でのみ見栄えがします。他の行の画像は、上の行の画像の元の高さより下に配置されているため、位置合わせされていません。これを整理するには、CSSに何を追加する必要がありますか？

4

2 に答える 2

6

高さを150pxに設定し、オーバーフローを非表示に設定したdivでラップすることをお勧めします。

.galleryImgWrapper {
    height: 150px;
    overflow: hidden;
}
.galleryImgWrapper img {
    /* your styles here */
}
于 2012-11-05T19:52:52.367 に答える
0

これらのコードを使用して、切り抜きを必要とせずにサムネイルを生成できます。.thumbnail {position：relative; 幅：200px; 高さ：200px; オーバーフロー：非表示; } .thumbnail img {位置：絶対; 左：50％; トップ：50％; 高さ：100％; 幅：自動; -webkit-transform：translate（-50％、-50％）; -ms-transform：translate（-50％、-50％）; 変換：translate（-50％、-50％）; } .thumbnail img.portrait {幅：100％; 高さ：自動; }

<div class="thumbnail">
  <img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
  <img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>
于 2015-06-24T11:16:15.693 に答える