jquery - CSS 或 JQuery 响应 'image fill div'

Question

我正在尝试复制一种非常简洁的方法来调整图像大小并填充响应式设计的 div。基本上，会发生以下情况。

1. 调整大小时，图像会调整大小以完美填充父 div，同时保持每张图像之间的边距相等。
2. 一旦 div 变得太小，图像就会溢出(就像 block 显示和向左浮动一样)
3. 神奇之处在于:当图像溢出时，所有图像会再次调整大小以填充 div，重复此过程以将图像完美放置在父 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%;}
}

或 css 使用 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