resize the image to fit the dimensions of TD

Question

This table has 2 columns and 5 rows; in each cell I put an image and I need that image to fit the td dimensions.

Here is my HTML and CSS code:

#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>

What I got is this:

The images doesn't fit all the cells.

How can I re-size these images? I need a suggestion which works with IE9.

Answer 1

Just make the images width to 100% and make the height auto to keep the images from looking distorted

so something like

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