サムネイル画像を最上部に垂直に整列する - CSS

Question

クライアントが異なる高さのサムネイル画像をアップロードしていて、画像ギャラリーが物事を一番上に整列していないようです。私は問題を見つけるためにしばらくの間、私の車輪を回転させています。どんな助けでも大歓迎です。

ここにリンクがあります。背の高い画像が小さな画像と同じように上揃えされていないことがわかります。しかし、すべての小さな画像は正しく整列しています。

http://scharf.geodesicgrafx.com/gallery/stock-photos-non-exclusive

Answer 1

私は があなたのようDIV（イメージコンテナ）の幅と高さを調整し、あなたはこのトリックを使用することができる

.image-container{ 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid #a29e9e; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    } 
 
img{ 
 
    width:100%; 
 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
 
    transition: all 2s; 
 
} 
 
img:hover{ 
 
    width:200%; 
 
    margin-left:-70px; 
 
    margin-top:-90px; 
 
    }

<div class="image-container"> 
 
<img src="http://scharf.geodesicgrafx.com/images/dmImage/SourceImage/197405-1-6Ca-Spider-Mite1.jpg"> 
 
</div>

のためのソリューションを持っています必要。 ユーザーがアップロードした画像は、画像コンテナdivに入っている必要があります。 画像の幅（スタイル）は100％でなければなりません。

OR

あなたが全体のPICのサンプルを表示したい場合

はちょうどこのスタイルシートを使用します。 divのオーバーフロープロパティを削除し、画像の高さ（コンテナ自体の高さ）を返します。

.image-container{ 
    width: 200px; 
    height: 200px; 
    border: 2px solid #a29e9e; 
    border-radius: 2px; 
    } 
img{ 
    width:100%; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: all 2s; 
    height:200px; 
}