適合圖片到表格單元

Question

我在這裏閱讀了很多帖子，但這些解決方案似乎不適合我。

我與行的問題，因爲它應該沒有那些白色的間距ONT頂部適合圖像：

#popuptable table, th, td, tr 
table.popuptable { 
    border-width: 1px; 
    border-spacing: 2px; 
    border-style: outset; 
    border-color: #2778AF !important; 
    border-collapse: collapse; 
    background-color: white; 
} 

table.popuptable th { 
    margin-left: 20px !important; 
    border-width: 0px; 
    padding: 2px; 
    border-style: ; 
    border-color: #2778AF !important; 
    background-color: white; 
    -moz-border-radius: ; 
} 

table.popuptable td { 
    border-width: 0px; 
    padding: 2px; 
    border-style: ; 
    border-color: #2778AF !important; 
    background-color: white; 
    -moz-border-radius: ; 
} 
table.popuptable tr { 
    border-width: 0px; 
    padding: 2px; 
    border-style: ; 
    border-color: #2778AF !important; 
    background-color: white; 
    -moz-border-radius: ; 
} 

哪裏是我的問題嗎？我試過的height所有組合我能想到的..

更新HTML的彈出：

<div id="hidden-BE" style="display:none;" class="popuptable"> 
<table border="0" width="400"> 
<tbody><tr> 
<th colspan="2"> Kanton BE </th> 
</tr> 
<tr> 
<td width="125px"><img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125"></td> 
<td valign="top"> 
<b>Auswahl (Total: 4)</b><br> 
<ul> 
<li>Laur, Ernst Ferdinand (1871-1964)</li> 
<li>Landis, Jakob (1926-)</li> 
<li>Lampert, Octave</li> 
<li>Laur-Schaffner, Sophie (1875-1960)</li> 
</ul> 
</td> 
</tr> 
</tbody></table> 
</div> 

Answer 1

這裏是調整佈局，以獲得良好的形象契合的一種方式。

對於HTML，添加valign="top"表格單元格保持圖像：

<table border="0" width="400" class="popuptable"> 
    <tbody> 
     <tr> 
      <th colspan="2">Kanton BE</th> 
     </tr> 
     <tr> 
      <td width="125px" valign="top"> 
       <img src="http://www.personnes-histoirerurale.ch/pimages/ch/be.gif" width="125"> 
      </td> 
      <td valign="top"> 
<b>Auswahl (Total: 4)</b> 
       <br> 
       <ul> 
        <li>Laur, Ernst Ferdinand (1871-1964)</li> 
        <li>Landis, Jakob (1926-)</li> 
        <li>Lampert, Octave</li> 
        <li>Laur-Schaffner, Sophie (1875-1960)</li> 
       </ul> 
      </td> 
     </tr> 
    </tbody> 
</table> 

對於CSS，進行以下修改：

table.popuptable td { 
    border-width: 1px; 
    padding: 0px; /* adds spacing above image, so remove... */ 
    border-style: solid; 
    border-color: #2778AF !important; 
    background-color: white; 
    -moz-border-radius: ; 
} 

table.popuptable img { 
    display: block; 
} 

table.popuptable ul { 
    border: 1px dashed red; 
    margin: 0 ; 
} 

使用display: block在img擺脫使用內聯元素插入的基線以下的額外空間。

表格單元格中還有2px填充，您可能希望根據需要將其刪除或保留。

最後，ul上的默認邊距可能會導致文本塊的高度高於圖像，因此請根據需要進行調整。

看到提琴：http://jsfiddle.net/audetwebdesign/HqQWY/

Answer 2

使用的屬性集，使圖像配合

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Answer 3

溝表，使用div彈出，將圖像設置爲div的背景圖像：

<div class="flag"></div> 

並設置背景大小：封面;

http://www.w3schools.com/cssref/css3_pr_background-size.asp