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>

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

2 个答案: