如何强制图像填充其表格单元格 [英] How do I force an image to fill its table cell COMPLETELY

问题描述

我已经阅读了许多论坛，并在那儿尝试了解决方案，但是它们都没有起作用，我所有图像之间的差距仍然很小.这是代码:

I have read through many forums and tried the solution there but none of them have worked I still have a small gap between all my images. Here is the code:

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

推荐答案

图像是嵌入式元素，由于与基线对齐，因此其下方有一些空白.

The image is an inline element and has some white space below it because of how it is aligned with the baseline.

要解决此问题，请尝试:

To fix it, try:

#td2 img {display: block;}

或

#td2 img {vertical-align: bottom;}

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

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

Note that you have set 5px padding to the top and right of the image, and I assumed that is for styling purposes.

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

Also, id attributes should be unique on a page, use class, much easier to maintain and allows for easier re-use of CSS rules.

这篇关于如何强制图像填充其表格单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！