Html 高度行不匹配，因为存在img标记

我在使用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>

---

如果您愿意放弃图像的简单居中，这应该可以：

td {
    position: relative;
}

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

---

演示：

不要添加属性

行span=“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>

---

工作示例：

尝试设置td高度：

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

---

我不太清楚你要什么。你是想让图像保持自然大小还是让细胞保持自然大小，或者完全是别的？不管image@metadept如何，单元格必须保持其大小。表格必须具有rowspan属性，高度必须以百分比为单位。高度必须以百分比为单位@slaker。如果图像可以占用所有单元格空间，那会更好，但您的解决方案是我见过的最好的。谢谢

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