jquery - 带有方形图像的网格布局（溢出隐藏）

Question

我正忙于网格布局，网格的每个 div 中都有图像。但我想让每个图像都成为一个正方形，所以必须隐藏所有溢出。我唯一的问题是，宽度设置为 '20%' 如何让高度成为该 div 的确切宽度？

Answer 1

您可以使用padding-bottom:100%

此技术对于保持对象的纵横比（在您的情况下为平方比）非常有用。唯一的缺点是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>