html - 高度行不匹配，因为存在 img 标签

Question

我在使用 CSS 为表格设置样式时遇到问题。我正在使用 div 来包装表格元素。当我将 img 标签插入一个单元格时，就会出现问题。是高度变化。我试图设置行元素的高度，但没有运气。这是示例。我的目标是添加一个图像以适应所有单元格空间而不改变它的大小。我会感谢所有的帮助。

注意：所有行的高度必须相同，大小必须为百分比。

html

<div id="client">
<table>
    <col id="col1" />
    <col id="col2" />
    <col id="col3" />
    <tr>
        <td rowspan="3">
            <img id="profilePhoto" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTjelu9edzZ0fit_oqWGlHKS8koq1Vc56_u0XiYJynYbQmKSuQTCA" />
        </td>
        <td>2a</td>
        <td>3a</td>
    </tr>
    <tr>
        <td colspan="2">2b</td>
    </tr>
    <tr>
        <td colspan="2" class="row">2c</td>
    </tr>
    <tr>
        <td>1d</td>
        <td colspan="2">2d</td>
    </tr>
</table>

css

html {
height: 100%;
padding: 0;
margin: 0;
}
body {
height: 100%;
padding: 0;
margin: 0;
}
body #client {
outline:solid 1px;
width: 75%;
height: 25%;
overflow: hidden;
}
table {
width: 70%;
height:100%;
table-layout:fixed;
}
td {
text-align: center;
border: solid thin;
overflow: hidden;
}
#profilePhoto {
height:100%;
width:100%;
}

Answer 1

如果您愿意放弃图像的轻松居中，这应该可行：

td {
    position: relative;
}

#profilePhoto {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

演示：http: //jsfiddle.net/PUqm8/1/

Answer 2

不要添加属性rowspan="3"，而是将图像放在一个 div 中，并为其隐藏溢出。此外，由于没有更多的行跨度，不要忘记在第 2 行和第 3 行添加一个新单元格

<td>
    <div style="height:30px;overflow:hidden;">
        <img id="profilePhoto" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTjelu9edzZ0fit_oqWGlHKS8koq1Vc56_u0XiYJynYbQmKSuQTCA"/>
    </div>
</td>

工作示例：http: //jsfiddle.net/fdAqn/

Answer 3

尝试设置 td 高度：

td{
    text-align: center;
    border: solid thin;
    overflow: hidden;
    height:10px;
}