CSS or JQuery responsive 'image fill div' with a catch -

i trying replicate neat method of resizing images , filling div responsive design. basically, following happens.

1. on resize, images resize fill parent div while maintaining equal margin between each image.
2. once div gets small, images overflow (as 1 block display , float left)
3. here magic: on overflow of images, images again resize fill div, , repeats perfect image placement in parent div, least amount of space wastage.

here follows example if explanation hard understand:

example

regards, matt

http://codepen.io/anon/pen/ovwpvo

html

<img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> <img src="http://placehold.it/350x150"> 

css

body {text-align: center;} img {   width: 20%;   margin: 10px; } @media (max-width: 1280px) {   img {width: 30%;} } @media (max-width: 980px) {   img {width: 45%;} } @media (max-width: 768px) {   img {width: 70%;} } 

or css using calc();

body {text-align: center; margin: 0;} img {   margin: 10px;   width: calc(100%/4 - 4*6px); } @media (max-width: 1280px) {   img {width: calc(100%/3 - 3*8px);} } @media (max-width: 980px) {   img {width: calc(100%/2 - 2*11px);} } @media (max-width: 768px) {   img {width: calc(100%);} } 

http://codepen.io/anon/pen/oxbzpl