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

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

来源

2012-10-28 Angelo A

您可以使用padding-bottom:100%

这个技术是非常有用的，以保持物体（在你的情况平方比）的纵横比。唯一的缺点是div必须设置为position:relative，并且您必须具有position:absolute的元素。

来源

2012-10-28 22:27:07

我不想做的纵横比任何东西。我希望父div是一个正方形，因此该div中图像的溢出需要隐藏。但我不知道如何设置父div的高度。 –

“方形”是一个长宽比。长宽比是1：1。对不起，我忘了提及这项技术的内容必须是绝对的。我正在更新帖子 –

好吧，我仍然无法弄清楚。我做了一个jsFiddle，你能告诉我我做错了什么吗？ http://jsfiddle.net/wSbnj/1/ –

感谢卡洛斯·马丁内斯，这正是我需要的： 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>

来源

2012-10-28 23:28:16

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

回答

相关问题