22

如何使图像适合表格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单元格。

拍摄：

在此处输入图像描述

我究竟做错了什么 ？

任何建议都会很棒。

4

4 回答 4

28

内联内容在底部为下降的字符留出空间 (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" />
于 2013-06-30T18:03:44.257 回答
5

这都是关于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;
}
于 2014-11-25T15:10:35.377 回答
0

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

于 2013-06-30T17:45:07.667 回答
0

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

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

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

但还是用 CSS 处理这个更好，我建议你这样做。

  • 我希望这会有所帮助。
于 2016-06-02T13:27:53.407 回答