将图像适应表格单元格大小 [纯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演示中，该图像无法适应 td 单元格。

截图：

我做错了什么？

任何建议都将不胜感激。

- Hamed Kamrava

---

img { display:block; } - Matt Whipple

纯HTML不应该用于样式设计，一旦使用了样式设计，它就不再被认为是真正的“纯HTML”（除非在90年代）。 - Matt Whipple

@HamedKamrava 你问“我做错了什么？”嗯，恐怕你做错的是试图寻找一个纯HTML的解决方案。为什么你不能使用样式呢？ - Mr Lister

@MrLister 我可以使用样式，但我不想使用它。 - Hamed Kamrava

哈哈，你不想使用 CSS 有什么原因吗？ - Ankit Rohilla

Answer 1

内联内容会为下降字符（如 j、y、q）留出底部空间：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

有几种解决方法：

使用 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" />

- LouD

Answer 2

这都和display: block有关 :)

更新:

好的，现在你有table、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;
}

- miksiii

---

好的，所以如果您在td单元格中存储了一个表和图像-您的td具有某些宽度，对吧？为了使图像适合该宽度，您必须将**display: block;**属性分配给图像。 - miksiii

实际上，更符合StackOverflow的精神是您编辑您的答案，而不是在评论中提供精度。 :-) - lrineau

我已经完成了。希望你觉得有用。 - miksiii

确实，这样好多了！楼主可能会接受你的答案了。 - lrineau

Answer 3

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

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

请查看这个 JSFiddle：http://jsfiddle.net/Lk2Rh/27/

但是最好还是使用 CSS 来处理，我建议你这样做。

• 希望这能帮到你。

- DikaDikz

Answer 4

使用开发者偏好的工具，检查 tr、td 或 img 是否有任何填充或边距。

- ase

---

谢谢，但你能再解释一下吗？我有点困惑。 - Hamed Kamrava

例如使用Chrome的开发者工具，您可以右键单击一个元素并检查该元素所包含图像的外边距和内边距。 - ase