html - How to display a full-width grid of images that resizes and flows with the browser window with pure CSS -

i'm trying display set of images in grid, , reproduce effect of album grid view in itunes pure css, if possible.

desired functionality (video: http://quick.as/17l3sdgr):

1. the images should displayed in grid padding, filling browser width.
2. when window resized, images & padding shrink until minimum img width (let's 150px).
3. then 1 image pushed next row, , images become bigger until window width decreased again.

i know possible javascript, css provide better performance. possible?

edit: recorded screencast show functionality itunes: http://quick.as/17l3sdgr

try (untested)

fiddle

css :

img{   float:left;   width : 10%;   padding : 1%;   max-width : 150px;   min-width : 50px; } 

html :

<img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" /> <img src="yourimage.jpg" />