CSS 或 JQuery 有反应 'image fill div'

Question

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

调整大小时，图片会调整大小以完美填充父级 div，同时保持每张图片之间的边距相等。
一旦 div 变得太小，图像就会溢出（就像块显示和向左浮动一样）
神奇之处在于：在图像溢出时，所有图像再次调整大小以填充 div，并重复此操作以在父级 div 中完美放置图像，数量最少 space 浪费。

如果我的解释难以理解，下面是一个例子：

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

CSS 或 JQuery 有反应 'image fill div'

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

css

jquery

resize

image