響應/靈活的圖像柵格

Question

我工作的一個項目，將需要包含成員化身網格（有點像Twitter的追隨者格）See sample here

所以我目前正在做這樣的事情....

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

和CSS看起來像這樣...

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

}

所以我乾脆給化身大小70像素的和浮動它們固定寬度專區內。問題是我想將圖像大小聲明爲百分比，以使它們對其包含的元素具有流暢性和響應性。我猜這意味着創建一個4列的網格，其中每列是其容器寬度的25％。那麼頭像會在每列中被賦予最大寬度：100％？

我怎麼能在CSS中實現這一點？

Answer 1

您可以使用類似：

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

#panel a img{ 
width:100% 
} 

#panel{ 
    width:350px; 
} 

的演示here