图像网格流式布局（响应式）

Question

我正在制作一个具有流体布局的图像网格（4列）。在jsfiddle中，高度当前设置为自动，但它并没有按照我期望的方式显示，因为图像尺寸不同。在固定高度后，图像大小不成比例。我知道，当图像（宽度/高度）相等时，它会正常工作，但我不想这样做，因为图像将动态地出现（相同的宽度/不同的高度）。是否有任何方法可以针对不同的图像尺寸进行修复？以下是Fiddle。

img{
  width:100%;
  //height:150px;
  height:auto;
}

JSFiddle

- Nitesh

Answer 1

我采取了不同的方法。您说宽度将保持不变，而高度将有所变化。与浮动每个单独的img相反，我认为更好（也更容易）的方法是将imgs放在一列中，并浮动列。 实时演示，请尝试调整浏览器大小等... HTML

<div id="image_box">


<div class="col">
<img><img><img><img><img><img>
</div>


<div class="col">
<img><img><img><img><img><img>
</div>


<div class="col">
<img><img><img><img><img><img>
</div>


<div class="col">
<img><img><img><img><img><img>
</div>


<div class="col">
<img><img><img><img><img><img>
</div>


</div>

CSS

#image_box {
   width:90%;
   margin:0px auto;
}

.col {
   width:18%;
   float:left;
   margin:0px 1%;
}
img{
  width:100%;
  height:auto;
  margin-top:6%;
}

我相对快速地将这个东西拼凑在一起了。如果您想改进布局，可以为.image_box指定不同的宽度，并使列在其他列下方溢出。

- Josh Crozier

---

注意：Avast杀毒软件会在现场演示链接上出问题。 - Pablo

谢谢你的努力。但我不想把它放到单独的div中。标记将保持不变，就像我说的那样，它是流体布局，图像缩略图应该以相等的宽度和高度显示在那里，无论屏幕大小如何。在你的代码中，图片没有显示相等。 - Nitesh

是的。等宽和等高并彼此粘在一起。 - Nitesh

@JoshC，这不是你的网站，而是图片链接，显然是http://i.imgur.com/utUpgsS.png。 - Pablo

Answer 2

一种选择是限制img容器的高度。在您的情况下，是li元素。

li {
    height: 100px;
    overflow: hidden;
}

您需要提供一个与最小可能图像大小配合的高度。

- Derick

Answer 3

我已经尝试了一些在你的CSS中的更改，

请查看下面的JSFiddle链接：

'http://jsfiddle.net/wFLJW/3/'

- dsfg