web-dev-qa-db-ja.com

TDの寸法に合うように画像のサイズを変更します

このテーブルには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>

私が得たのはこれです：

enter image description here

画像がすべてのセルに収まるわけではありません。

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

htmlcssinternet-explorer-9
13
Malloc

画像の幅を100％にし、高さを自動にして、画像が歪んで見えるのを防ぎます

のようなもの

#menu img{
      display:block; width:100%; height:auto;
}
34
somdow

正確に合わせるには、width:100%とheight:100%を使用します。

プロパティmax-widthおよびmax-heightは、要素の寸法セットではなく、制限寸法です。

2
Matt K