CODEWITHSUNDEEP
htmlcss
Jedda
Jedda

Reputation: 1017

Responsive/Flexible image grid

I'm working on a project that will require a grid containing members avatars (kind of like a twitter followers grid) See sample here

Currently I'm doing something like this:

#panel {
width:290px;
background-color:#AAA;
padding: 15px;
}


#panel a img {
position: relative;
display:block;
width: 70px;
height: 70px;
float: left;
margin: 0px;
padding: 0px;
z-index: 1;
border:#888 1px solid;
}
<div id="panel">  
<h1> Current Members </h1> 
<a href="#"><img src="silhouette.jpg"alt="" title=""/></a> 
<a href="#"><img src="silhouette.jpg"alt="" title=""/></a> 
<br style="clear:both;"/> 
</div>

So I'm simply giving the avatars a size of 70px and floating them within a fixed width div. Problem is I'd like to declare image sizes as a percentage to make them fluid and responsive to their containing element. I'm guessing this means creating a grid with 4 columns where each column is 25% of its containers width. Then avatars would be given a max-width: 100% within each column?

How could I achieve this in CSS?

Upvotes: 0

Views: 1447

Answers (1)

Mika Andrianarijaona
Mika Andrianarijaona

Reputation: 1647

You can use something like : 

#panel a{
position: relative;
display:block;
width: 24%;
float: left;
z-index: 1;
padding:0.5%;
}

#panel a img{
 width:100%
}

#panel{
  width:350px;   
}

A demo here

Upvotes: 1

Related Questions