使图像适合表格单元格 [纯 HTML]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17393090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit image to table cell [Pure HTML]
提问by Hamed Kamrava
How do i fit image to table tdcell? [Pure HTML]
如何使图像适合表格td单元格？[纯HTML]
I have tried below code to fit an image in table tdcell.
我尝试了下面的代码来适应表格td单元格中的图像。
HTML code is here :
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>
As you can see in following screenshot and in JsFiddle DEMO, that image doesn't fit to tdcell.
正如您在以下屏幕截图和JsFiddle DEMO 中看到的那样，该图像不适合td单元格。
Shot :
射击：
What am i doing wrong ?
我究竟做错了什么 ？
Any suggestion would be awesome.
任何建议都会很棒。
回答by LouD
Inline content leaves space at the bottom for characters that descend (j, y, q):
内联内容在底部为降序字符 (j, y, q) 留下空间：
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
There are a couple fixes:
有几个修复：
Use display: block;
用 display: block;
<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
or use vertical-align: bottom;
或使用 vertical-align: bottom;
<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
回答by miksiii
It's all about display: block:)
这都是关于display: block:)
Updated:
更新：
Ok so you have the table, tr and td tags:
好的，你有表格、tr 和 td 标签：
<table>
<tr>
<td>
<!-- your image goes here -->
</td>
</tr>
</table>
Lets say your tableor td(whatever define your width) has property width: 360px;. Now, when you try to replace the html comment with the actual image and set that image property for example width: 100%;which should fully fill out the tdcell you will face the problem.
假设您的tableor td（无论定义您的宽度）具有 property width: 360px;。现在，当您尝试用实际图像替换 html 注释并设置该图像属性时，例如width: 100%;应该完全填充td单元格，您将面临问题。
The problemis that your table cell (td) isn't properly filled with the image. You'll notice the space at the bottom of the cell which your image doesn't cover (it's like 5px of padding).
该问题是，你的表格单元格（td）没有正确填写与图像。您会注意到图像未覆盖的单元格底部的空间（就像 5px 的填充）。
How to solve this in a simpliest way?
如何以最简单的方式解决这个问题？
You are working with the tables, right? You just need to add the displayproperty to your image so that it has the following:
您正在处理表格，对吗？您只需将display属性添加到您的图像中，使其具有以下内容：
img {
width: 100%;
display: block;
}
回答by DikaDikz
if you want to do it with pure HTML solution ,you can delete the border in the table if you want...or you can add align="center" attribute to your img tag like this:
如果你想用纯 HTML 解决方案来做，你可以根据需要删除表格中的边框……或者你可以像这样向你的 img 标签添加 align="center" 属性：
<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />
see the fiddle : http://jsfiddle.net/Lk2Rh/27/
看小提琴：http: //jsfiddle.net/Lk2Rh/27/
but still it better to handling this with CSS, i suggest you that.
但还是用 CSS 处理这个更好，我建议你这样做。
- I hope this help.
- 我希望这会有所帮助。
回答by adamse
Use your developer's tool of choice and check if the tr, tdor imghas any padding or margins.
使用您选择的开发人员工具并检查tr,td或img是否有任何填充或边距。
