如何强制图像完全填充其表格单元格

Posted 2023-03-05

【中文标题】如何强制图像完全填充其表格单元格

【英文标题】：How do I force an image to fill its table cell COMPLETELY

【发布时间】：2013-05-26 08:10:28

【问题描述】：

我已经阅读了许多论坛并尝试了那里的解决方案，但没有一个有效。我的所有图像之间仍然存在很小的差距。代码如下：

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


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

【问题讨论】：

我看不出你的例子中哪里有差距。你能在 jsFiddle.net 上创建一个显示问题的示例吗？

【参考方案1】：

图像是一个内联元素，由于它与基线对齐的方式，其下方有一些空白。

要修复它，请尝试：

#td2 img display: block;

或

#td2 img vertical-align: bottom;

小提琴演示：http://jsfiddle.net/audetwebdesign/WxrvC/

注意您已在图像的顶部和右侧设置了 5px 的内边距，我认为这是出于造型目的。

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

【参考方案2】：

不同的浏览器使用不同的默认填充/边距/间距等呈现 html 元素。您可以尝试像这样重置这些：

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