适合图片到表格单元格[纯HTML]

我如何适合表格td单元格的图像？ [Pure HTML]适合图片到表格单元格[纯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细胞。

射击：

enter image description here

我到底做错了什么？

任何建议都会很棒。

来源

2013-06-30 Hamed Kamrava

'img {display：block; }' –

@MattWhipple。我说纯HTML ... –

纯HTML不应该做造型。它在90年代以后不会被视为纯粹的。 –

联内容留出空间，底部为下降字符（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-30 18:03:44 LouD

这里有一个小提琴的例子：http://jsfiddle.net/sj9YE/ – LouD

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

来源

2013-06-30 17:45:07 adamse

谢谢，但你能解释更多吗？我很困惑 –

使用例如Chrome的开发工具，您可以右键单击一个元素，并检查是否有任何边距填充在图像封闭的元素。 – adamse

这是所有关于display: block :)

更新：

好了，所以你有表，TR和TD标签：

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

比方说你table或td（无论定义你的宽度）有属性width: 360px;。现在，当您尝试用实际图像替换html注释并将该图像属性设置为width: 100%;时，应该完全填写td单元格，您将面临问题。

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

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

您正在使用表格吗？你只需要在显示属性添加到您的图像，使其具有以下：

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

来源

2014-11-25 15:10:35 miksiii

答案应该更精确，在我的opionion。 – lrineau

好的，所以如果你有一个表格和图像存储在TD单元格 - 你的TD有一些宽度，对吧？为了适应该宽度，您必须将** display：block; **属性分配给图像。 – miksiii

实际上，它更符合StackOverflow的精神，你是编辑你的答案，而不是在评论中给出答案的精确度。 :-) – lrineau

如果你想用纯HTML的解决方案做

，你可以在表中删除边框，如果你想。 ..或者你可以添加ALIGN =“中心”属性，你的img标签是这样的：

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

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

，但仍然能够更好地与CSS处理这个问题，我建议你。

我希望这可以帮到你。

来源

2016-06-02 13:27:53 DikaDikz

只是downvote？没有评论/解释？ – DikaDikz

适合图片到表格单元格[纯HTML]

回答

相关问题