Html 将图像适配到表格单元格

我在这里读了很多帖子，但这些解决方案似乎并不适合我

我对该行有一个问题，因为它应该适合没有顶部白色间距的图像：

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

我的问题在哪里？我尝试了所有我能想到的

高度的组合

更新弹出窗口的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>


坎顿贝
奥斯瓦尔（总数：4）


劳尔，恩斯特·费迪南德（1871-1964）
兰迪斯，雅各布（1926-）
兰伯特，八度
劳尔·沙夫纳，索菲（1875-1960）

使用属性集使图像适合

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

放弃表格，使用div弹出窗口，将图像设置为div的背景图像：

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



并设置背景尺寸：封面

这里有一种调整布局以获得良好图像匹配的方法

对于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>

在
img
上使用
display:block
，以去除基线下插入内联元素的额外空间

表格单元格中还有2px填充，您可能需要根据需要删除或保留这些填充

最后，
ul
上的默认边距可能会导致文本块的高度高于图像，因此需要调整这些边距

请参阅fiddle:
相关html..在哪里。。？图像在哪里。。？要保持图像的纵横比吗？请尝试在表格单元格或表格本身中使用
边距。另外，
valign
属性可能会有帮助。边距不起作用，但填充起作用：
td{padding top:0px；padding bottom:0px；}
下次我将使用divs；-）
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 ;
}