响应式/灵活的图像网格

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;

}

所以我只是给头像一个 70px 的大小并将它们浮动在一个固定宽度的 div 中。问题是我想将图像大小声明为百分比，以使它们流动并响应其包含的元素。我猜这意味着创建一个有 4 列的网格，其中每列是其容器宽度的 25%。那么头像会被赋予一个 max-width: 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