如何使图像适合表格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 DEMO中看到的那样，该图像不适合td单元格。
拍摄：
我究竟做错了什么 ？
任何建议都会很棒。
内联内容在底部为下降的字符留出空间 (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" />
这都是关于display: block:)
更新：
好的，所以你有 table、tr 和 td 标签：
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
假设您的tableor td（无论定义您的宽度）具有 property width: 360px;。现在，当您尝试将 html 注释替换为实际图像并设置该图像属性时，例如width: 100%;应该完全填充td单元格，您将面临问题。
问题是您的表格单元格 ( )td未正确填充图像。您会注意到图像未覆盖的单元格底部的空间（就像 5px 的填充）。
如何以最简单的方式解决这个问题？
你正在处理桌子，对吧？您只需将display属性添加到您的图像，使其具有以下内容：
img {
width: 100%;
display: block;
}
使用开发人员选择的工具并检查tr、td或img是否有任何填充或边距。
如果您想使用纯 HTML 解决方案，您可以删除表格中的边框...或者您可以将 align="center" 属性添加到您的 img 标签，如下所示：
<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
看小提琴：http: //jsfiddle.net/Lk2Rh/27/
但还是用 CSS 处理这个更好，我建议你这样做。