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

【问题标题】：Image Grid Fluid Layout (Responsive)图像网格流体布局（响应式）
【发布时间】：2013-08-25 03:32:52
【问题描述】：

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

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

JSFiddle

【问题讨论】：

标签： html css fluid-layout

【解决方案1】：

我采取了不同的方法。您说宽度将保持不变，而高度会有所不同。与浮动每个单独的 img 相比，我认为将 imgs 放在列中并浮动列会更好（也更容易）。

Live demo, try resizing the browser and stuff...

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 指定不同的宽度，并让列在其他列下溢出。

【讨论】：

注意：Avast 抗病毒药物在现场演示链接上疯了
感谢您的努力。但我不想放入单独的 div 中。标记将保持不变，正如我所说的其流畅的布局，并且图像拇指应该以相同的宽度和高度显示在那里，与屏幕尺寸无关。在您的代码中，图像不相等。
是的。等宽等高，相互粘连
@JoshC 不是您的网站，但图片链接显然是 i.imgur.com/utUpgsS.png

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我已尝试对您的 css 进行一些更改，

请在下面找到 jsfiddle

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

【讨论】：