Измените размер изображения в соответствии с размерами 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>

Что я получил, это:

Изображения не соответствуют всем ячейкам.

Как изменить размер этих изображений? Мне нужно предложение, которое работает с IE9.

Ответ 1

Просто сделайте ширину изображений до 100% и сделайте высоту автоматически, чтобы изображения выглядели искаженными

так что-то вроде

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

Ответ 2

Если вы хотите, чтобы он точно соответствовал, используйте width:100% и height:100%.

В свойствах max-width и max-height не установлены размеры элемента, они ограничивают размеры.