适合图片到表格单元

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