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

Question

我正在处理具有流畅布局的图像网格（4 列）。目前在 jsfiddle 中，高度设置为自动，但由于图像尺寸不同，它并没有达到我的预期。固定高度后图像大小不成比例。我知道，当图像（宽度/高度）相等时它会正常工作，但我不想这样做，因为图像将动态出现（相同宽度/不同高度）。有什么办法可以针对不同的图像尺寸进行修复？小提琴下面

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

JSFiddle

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，并让列在其他列下溢出。

Answer 2

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

请在下面找到jsfiddle

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

Answer 3

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

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

您必须提供一个可以使用尽可能小的图像尺寸的高度。