Fit image to table cell [Pure HTML]

Question

How do i fit image to table td cell? [Pure HTML]

I have tried below code to fit an image in table td cell.

HTML code is here :

<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0">
<tr>
    <td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td>
</tr>
</table>

As you can see in following screenshot and in JsFiddle DEMO, that image doesn't fit to td cell.

Shot :

What am i doing wrong ?

Any suggestion would be awesome.

Answer 1

Inline content leaves space at the bottom for characters that descend (j, y, q):

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

There are a couple fixes:

Use display: block;

<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

or use vertical-align: bottom;

<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />