15

このテーブルには 2 列と 5 行があります。各セルに画像を入れて、その画像がtd寸法に合うようにする必要があります。

ここに私のHTMLとCSSコードがあります:

#menu{
        float:right;
        width:200px;
        height:650px;
        border-bottom:none;
        border-left:solid 1px;

}


#menu img{
        width:100%; height:auto;;
}

td{
  border:solid 1px;
}

<table id="menu" cellspacing="0">
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
</table>

私が得たのはこれです：

ここに画像の説明を入力

画像はすべてのセルに収まりません。

これらの画像のサイズを変更するにはどうすればよいですか? IE9 で動作する提案が必要です。

4

3 に答える 3

41

画像の幅を 100% にし、高さを自動にして、画像がゆがんで見えないようにするだけです。

のようなもの

#menu img{
      display:block; width:100%; height:auto;
}
于 2012-09-20T18:27:21.910 に答える
3

ぴったり合わせたい場合は、 と を使用width:100%しheight:100%ます。

プロパティmax-widthとは、要素の寸法を設定max-heightするのではなく、寸法を制限します。

于 2012-09-20T18:18:35.867 に答える