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