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

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; }

Answer 1

图像是内联元素,并且由于它与基线的对齐方式,因此图像下方有一些空白区域.

要修复它,请尝试:

#td2 img {display: block;}

要么

#td2 img {vertical-align: bottom;}

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

请注意,您已将5px填充设置为图像的顶部和右侧,我认为这是出于样式目的.

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