CSS或JQuery响应'图像填充div'与捕获

Question

我想复制一个非常整洁的方法调整图像大小和填充响应设计的div。基本上，会发生以下情况。

1. 在调整大小时，图像调整大小以完美填充父div，同时在每张图像之间保持相等的边距。
2. 一旦div变得太小，图像溢出（如块显示和左浮动一样）
3. 这里是神奇：在图像溢出时，所有图像再次调整大小以填充div，并且这重复以获得完美的图像放置在母公司，最小的空间浪费。

这里如下一个例子，如果我的解释是很难理解：

Example

问候， 马特

Answer 1

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

或使用calc（）的css;

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