如何强制一张图片完全填充其所在的表格单元格

Question

我已经阅读了许多论坛并尝试了那里的解决方案，但它们都没有起作用，我仍然在所有图像之间有一个小间隙。这是代码：

<table id="Table">
            <tr>
                <td id="td1"><h2>~ Curling ~</h2></td>
                <td id="td2" rowspan="2"><img src="../images/curlingMid.jpg" 
                width="100%" height="100%" border="2" alt=""/></td>
                <td id="td1"><h2>~ Curling ~</h2></td>
            </tr>
</table>


#td1 { width: 32%;vertical-align: text-top; }
#td2 { padding-right: 5px; padding-top: 5px; }

- Stothertk

---

我没有看到你的示例中存在空白。你能在jsFiddle.net上创建一个显示问题的示例吗？ - j08691

Answer 1

该图像是一个内联元素，并由于其与基线对齐方式而在其下方留有一些空白。

要解决此问题，请尝试：

#td2 img {display: block;}

或者

#td2 img {vertical-align: bottom;}

Fiddle演示：http://jsfiddle.net/audetwebdesign/WxrvC/

请注意，您已经将5像素的内边距设置到图像的顶部和右侧，我假设这是为了样式而使用的。

此外，id属性在页面上应该是唯一的，使用class更容易维护，并允许更轻松地重用CSS规则。

- Marc Audet

Answer 2

不同的浏览器对HTML元素的默认填充/边距/间距等进行了不同的渲染。您可以尝试像这样重置它们：

#table td {padding: 0px; margin: 0px;}
#table {border-spacing: 0px;}

- dshu610