Jak wymusić obraz, aby wypełnić jego komórkę tabeli CAŁKOWICIE

Question

Przeczytałem wiele forów i wypróbowałem tam rozwiązanie, ale żaden z nich nie zadziałał, wciąż mam niewielką lukę między wszystkimi moimi obrazami. Oto kod:

<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

Obraz jest elementem inline i ma jakąś białą przestrzeń poniżej niej, ponieważ, jak to jest dostosowane do wartości wyjściowych.

Aby go naprawić, spróbuj:

#td2 img {display: block;} 

lub

#td2 img {vertical-align: bottom;} 

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

Uwaga, które zostały ustawione 5px dopełnienie do góry i prawej stronie obrazu i założyłem, że to jest do celów stylizacji.

Atrybuty powinny być unikatowe na stronie, należy użyć class, znacznie łatwiejsze w obsłudze i pozwalające na łatwiejsze ponowne użycie reguł CSS.

Answer 2

różnych przeglądarek renderowania elementów HTML z różnych domyślnych dopełnienia/marginesów/rozstaw itp .. można spróbować przywrócić je tak:

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