jquery - 正方形の画像を使用したグリッド レイアウト (オーバーフローは非表示)

Question

グリッドの各 div に画像を含むグリッド レイアウトで忙しいです。しかし、すべての画像を正方形にしたいので、すべてのオーバーフローを非表示にする必要があります。私の唯一の問題は、幅が '20%' に設定されていることです。高さをその div の正確な幅にするにはどうすればよいですか?

Answer 1

使用できますpadding-bottom:100%

この手法は、オブジェクトの縦横比 (この場合は 2 乗比) を維持するのに非常に役立ちます。唯一の欠点は、 をdivとして設定する必要がposition:relativeあり、内部に を含む要素が必要なことですposition:absolute。

Answer 2

Carlos Martinez のおかげで、これが必要でした: http://jsfiddle.net/wSbnj/2/

div#image {
    box-sizing: border-box; 
    border:1px solid red;
    position:relative;
    width:50%;
    padding-bottom:50%;
    overflow:hidden;
}
div#image img {
    position:absolute;
    width:100%;
}
​
<div id="wrapper">
    <div id="image"><img src="http://static.zara.net/photos//2012/I/0/2/p/5618/655/802/5618655802_1_1_3.jpg?timestamp=1350490400442"></div>
</div>

</p>