[英]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;}
or 要么
#td2 img {vertical-align: bottom;}
Fiddle demo: http://jsfiddle.net/audetwebdesign/WxrvC/ 小提琴演示: http : //jsfiddle.net/audetwebdesign/WxrvC/
Note that you have set 5px padding to the top and right of the image, and I assumed that is for styling purposes. 请注意 ,您已将5px填充设置为图像的顶部和右侧,我认为这是出于样式目的。
Also, id
attributes should be unique on a page, use class
, much easier to maintain and allows for easier re-use of CSS rules. 此外, id
属性在页面上应该是唯一的,使用class
,更容易维护,并允许更容易地重用CSS规则。
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;}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.