1

たくさんの画像が表示されるページを作りたいです。

<style>
img{margin-bottom: 3px; float: left}
</style>

<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">
<img src="myimg.png">

幅と高さがすべて同じであれば見栄えがします。しかし、そのうちの 1 つがより大きなサイズの場合はどうなるでしょうか。それはすべてのレイアウトを台無しにし、見栄えを悪くする空白を表示します。

これはどのように修正できますか？

4

4 に答える 4

1

width: 150px またはその css 内に必要なサイズを入れてみませんか?

<style>
img{margin-bottom: 3px; width: 150px; float: left}
</style>
于 2012-05-11T08:09:23.510 に答える
1

少しJavaScriptを使用すると、それらをすべて同じサイズにすることができます。しかし、見た目はあまり良くなりません。たぶん、同じ幅と、煩わしくないシンプルな繰り返しの背景が妥協点になるでしょう.

于 2012-05-11T08:10:38.740 に答える
0

画像全体を表示する必要があまりない場合は、背景画像として画像を div タグに配置し、画像を中央に配置してから、div 要素の固定幅と高さを設定することを検討できます。

<style>
.imgpanel{
  margin-bottom: 3px; 
  float: left;
  background-repeat:no-repeat;
  background-position:center;
  width:200px;
  height:200px; 
}
</style>


<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>
<div class="imgpanel" style="background-image:url('/images/sample.png');"></div>


または、画像を div タグ内に配置して、オーバーフローを非表示に設定することもできます。

<style>
.imgpanel{
  margin-bottom: 3px; 
  float: left;
  width:200px;
  height:200px; 
  overflow:hidden;
}
</style>

<div class="imgpanel"><img src="/images/sample.png" /></div>
<div class="imgpanel"><img src="/images/sample.png" /></div>
<div class="imgpanel"><img src="/images/sample.png" /></div>


必要に応じて、サムネイル生成スクリプトを使用して、画像のサイズを変更しても問題ない場合は、常に必要な特定のサイズの画像を作成できます。サムネイル ジェネレーターのコード サンプルについては、http://sourceforge.netを参照してください。

于 2012-05-11T08:33:30.307 に答える
0

制限サイズ

img {
    max-width: 100px;
    max-height: 100px;

    border: 1px solid grey; /* show visible element size */
}

サンプル:
http://jsfiddle.net/UqGW7/3/

サイズ直し（ストレッチ）

img {
    width: 100px;
    height: 100px;

    border: 1px solid grey; /* show visible element size */
}

サンプル:
http://jsfiddle.net/UqGW7/4/

画像のトリミング (ラッパーを使用)

<span class="wrapper">
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/592211_21253884267_736366040_q.jpg" />
</span>


.wrapper {
    width: 100px;
    height: 100px;

    display: inline-block;
    overflow: hidden; /* crop larger images */

    border: 1px solid grey; /* show visible element size */

    text-align:center; /* center horizontally */
}

サンプル:
http://jsfiddle.net/UqGW7/5/

于 2012-05-11T08:34:08.900 に答える