Адаптивная/гибкая сетка изображений ⇐ CSS

[Anonymous]

Я работаю над проектом, для которого потребуется сетка, содержащая аватары участников (что-то вроде сетки подписчиков в Твиттере). См. пример здесь
В настоящее время я делаю что-то вроде этого:

Код: Выделить всё

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

Код: Выделить всё

 Current Members 
[url=#]
[img]silhouette.jpg[/img]
[/url]
[url=#]
[img]silhouette.jpg[/img]
[/url]

Поэтому я просто присваиваю аватарам размер 70 пикселей и перемещаю их в плавающее положение. внутри div с фиксированной шириной. Проблема в том, что я хотел бы объявить размеры изображений в процентах, чтобы сделать их гибкими и отзывчивыми к содержащему их элементу. Я предполагаю, что это означает создание сетки с 4 столбцами, где каждый столбец составляет 25% ширины контейнера. Тогда аватарам будет присвоена максимальная ширина: 100% в каждом столбце?
Как я могу добиться этого в CSS?

Подробнее здесь: https://stackoverflow.com/questions/741 ... image-grid