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

So currently I'm doing something like this....

<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> 

and the CSS looks 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;

}

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?

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