表格中插入图片，图片显示未达到预期效果

问题遇到的现象和发生背景

插入到表格的图片不受表格宽度的限制，有没有办法让图片的大小跟随表格的大小变化？另外，给图片加了高度的限制之后，图片没有填满表格有间隙，有什么办法把这个间隙给弄掉？

问题相关代码，请勿粘贴截图
<table border="1" width="500" align="center">
        <tr>
            <td>姓名</td>
            <td>张三丰</td>
            <td>性别</td>
            <td>男</td>
            <td rowspan="3"><img src="img/4.png" height="200"></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>108</td>
            <td>电话</td>
            <td>186888886666</td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td colspan="3">12345678@qq.com</td>
        </tr>
    </table>
运行结果及报错内容

img

给你的td,也就是单元格设定width后，图片的width和height都设置成100%

img

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1" width="580px" align="center">
        <tr>
            <td style="width:80px;">姓名</td>
            <td style="width:160px;">张三丰</td>
            <td style="width:80px;">性别</td>
            <td style="width:160px;">男</td>
            <td rowspan="3" style="width:200px;"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp0.meituan.net%2Fdpdeal%2F1664f008b8babea851d1cd64349d933b485992.jpg&refer=http%3A%2F%2Fp0.meituan.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643860279&t=812f21f3ae45232d9b7f21de48728b8d"  style="width:100%; height:100%"></td>
        </tr>
        <tr>
            <td>年龄</td>
            <td>108</td>
            <td>电话</td>
            <td>186888886666</td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td colspan="3">12345678@qq.com</td>
        </tr>
    </table>
</body>
</html>

在img样式里添加

style="vertical-align: bottom;"

造成图片下方空隙的原因是因为图片作为行内元素 对齐方式的‘基线对齐’导致的
还有其他方法解决这种问题，比如把图片转换为块元素 display=block