html – 图像网格流体布局(响应)

2023年2月16日 196次阅读

我正在处理具有流体布局的图像网格(4列).在jsfiddle中,当前高度设置为auto,但它不是我预期的方式,因为图像尺寸不同.固定高度后图像尺寸不成比例.我知道,当图像(宽度/高度)相等但是我不想这样做时它会正常工作,因为图像会动态出现(相同的宽度/不同的高度).有没有什么方法可以修复不同的图像尺寸？小提琴下面

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

JSFiddle

最佳答案 我采取了不同的方法.你说宽度将保持不变,而高度会有所不同.与浮动每个单独的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指定不同的宽度,并在其他列下有列溢出.

点赞