Question

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

在调整大小时，图像会调整大小以完美填充父div，同时在每个图像之间保持相等的边距。
一旦div变得太小，图像溢出（就像块显示并向左浮动一样）
这里是魔法：在图像溢出时，所有图像都会再次调整大小以填充div，并且这会在父div中重复完美的图像放置，并且空间浪费最少。

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

此致马特

Answer 1

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响应'图像填充div'与catch

1 个答案: