Question

我在这里阅读了很多帖子，但这些解决方案似乎对我不起作用。

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

example

#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

使用一组属性来使图像适合

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

Answer 2

抛弃表格，使用div进行弹出，将图像设置为div的背景图像：

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

并设置background-size：cover;

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

Answer 3

这是调整布局以获得良好图像拟合的一种方法。

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

使图像适合表格单元格

3 个答案: