4

流動的なレイアウトで画像グリッド（4列）に取り組んでいます。jsfiddle では現在、高さは auto に設定されていますが、画像のサイズが異なるため、期待どおりにはなりません。高さを固定した後の画像サイズは比例しません。画像（幅/高さ）が等しい場合は適切に機能することはわかっていますが、画像が動的に（同じ幅/異なる高さ）になるため、これを行いたくありません。異なる画像サイズで修正できる方法はありますか? 下のフィドル

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

JSFiddle

4

3 に答える 3

2

私は別のアプローチを取りました。幅は同じままですが、高さは異なります。個々の img をフローティングするのではなく、列内に img を配置し、列をフロートする方が良い (そして簡単) と思います。

ライブデモ、ブラウザなどのサイズを変更してみてください...

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列を他の列の下にオーバーフローさせることができます。

于 2013-08-24T18:46:40.193 に答える
0

1 つのオプションは、img コンテナーの高さを制限することです。あなたの場合、li要素。

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

可能な限り小さい画像サイズで機能する高さを指定する必要があります。

于 2013-08-24T18:29:15.947 に答える
0

私はあなたのcssでいくつかの変更を試みました、

以下のjsfiddleを見つけてください

'http://jsfiddle.net/wFLJW/3/'
于 2013-08-24T18:34:08.170 に答える