使图像适合表格单元格[纯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 DEMO中看到的那样，该图片不适合td单元格。

拍摄：

我做错了什么？

任何建议都很棒。

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

关于display: block：）

的全部内容

<强>更新：

好的，你有表格，tr和td标签：

<table>
  <tr>
    <td>
      <!-- your image goes here -->
    </td>
  </tr>
</table>

让我们说你的table或td（无论你的宽度是什么）都有属性width: 360px;。现在，当您尝试将html注释替换为实际图像并设置该图像属性（例如width: 100%;）时，该属性应完全填写 td 单元格，您将遇到问题

问题是您的表格单元格（td）未正确填充图片。你会注意到你的图像没有覆盖的单元格底部的空间（它就像5px的填充）。

如何以最简单的方式解决这个问题？

你正在使用桌子，对吗？您只需要将 display 属性添加到图像中，以便它具有以下内容：

img {
  width: 100%;
  display: block;
}

Answer 3

使用您选择的开发人员工具，检查tr，td或img是否有任何填充或边距。

Answer 4

如果您想使用纯HTML解决方案，您可以删除表格中的边框...或者您可以添加align =＆＃34; center＆＃34;属性为你的img标签，如下所示：

<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

看小提琴：http://jsfiddle.net/Lk2Rh/27/

但使用CSS处理这个问题仍然更好，我建议你这样做。

• 我希望这有帮助。