html - 画像を表のセルに合わせる [Pure HTML]

Question

td画像を表のセルに合わせるにはどうすればよいですか? [ピュア HTML]

tdテーブルセルに画像を収めるために以下のコードを試しました。

HTMLコードはこちら：

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

次のスクリーンショットとJsFiddle DEMOtdでわかるように、その画像はセルに収まりません。

ショット:

私は何を間違っていますか？

どんな提案でも素晴らしいでしょう。

Answer 1

インライン コンテンツは、下位の文字 (j、y、q) 用に下部にスペースを残します。

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

いくつかの修正があります。

使用するdisplay: block;

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

または使用vertical-align: bottom;

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

Answer 2

開発者が選択したツールを使用して、tr、tdまたはimgにパディングまたはマージンがあるかどうかを確認します。