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.

Peele

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;
}

Milkmaid

How to make sure image always matches the height of the cell as well? – Hawaiian

This worked for me! I did not need to use the display:block – Clemenceau

Answer 2

If you want it to fit exactly, use width:100% and height:100%.

The properties max-width and max-height do not set the dimensions of an element, they restrict the dimensions.

Hemo

Answer 3

Font Size & display block

<td style="font-size:0px">
   <img src="IMG_URL" width="XXX" style="display:block;"> 
</td>

Daggna