html - 由于存在 img 标签，高度行不匹配

Question

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

注意:所有行必须具有相同的高度，并且大小必须以百分比表示。

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/