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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16841455/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:56:00  来源:igfitidea点击:

How do I force an image to fill its table cell COMPLETELY

htmlcssimagehtml-tablecell

提问by Stothertk

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

回答by Marc Audet

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

or

或者

#td2 img {vertical-align: bottom;}

Fiddle demo: http://jsfiddle.net/audetwebdesign/WxrvC/

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

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

请注意,您在图像的顶部和右侧设置了 5px 内边距,我认为这是出于样式目的。

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

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

回答by dshu610

different browsers render html elements with different default padding/margins/spacing etc.. you can try reset these like this:

不同的浏览器使用不同的默认填充/边距/间距等渲染 html 元素。你可以尝试像这样重置这些:

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