CODEWITHSUNDEEP
jquerycssjquery-mobile
anche
anche

Reputation: 2884

grid layout with square images (overflow hidden)

I'm busy with a grid layout with images in each div of the grid. But I want to have every image as a square so all the overflow must be hidden. My only problem is, the width is set as '20%' how do I get the height to be the exact width of that div?

Upvotes: 0

Views: 864

Answers (2)

anche
anche

Reputation: 2884

Thanks to Carlos Martinez, this is what I needed: 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>

​

Upvotes: 1

Carlos Martinez T
Carlos Martinez T

Reputation: 6528

You can use padding-bottom:100%

This technique is very useful to keep the aspect ratio of objects (squared ratio in your case). The only drawback is that the div must be set as position:relative and inside you must have elements with position:absolute.

Upvotes: 1

Related Questions