如何让td内图片高度匹配无图时td高度（响应式容器场景）

我明白你的困扰——表格单元格总是被图片的原始高度撑开，没法和无图时保持一致的高度，而且父级还是响应式容器不能硬写固定尺寸。别担心，咱们用CSS定位和对象适配属性就能搞定这个问题，下面给你两种可靠的解决方案：

方案一：让图片填满TD且保持比例（不拉伸变形） #

这个方法会让图片完全填充TD的空间，同时保持图片的原始比例，超出的部分会被裁剪掉，不会撑大TD。直接修改你的代码如下：

<div style='height:300px;width:300px;'>
  <table style='height:100%;width:100%;'>
    <tr>
      <td style='position: relative; overflow: hidden;'>
        <img src="你的图片URL" style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;'>
      </td>
    </tr>
  </table>
</div>

关键样式解释： #

• td设置position: relative：让内部的图片以TD为定位参照点
• td设置overflow: hidden：把图片超出TD边界的部分隐藏起来
• 图片设置position: absolute：脱离文档流，这样图片就不会再撑开TD的高度
• width: 100%; height: 100%：强制图片占满TD的全部空间
• object-fit: cover：保持图片的宽高比例，裁剪多余部分来填满TD，避免拉伸变形

方案二：完整显示图片（不裁剪） #

如果你希望图片完整显示，不做裁剪，只是让它适配TD的高度，可以把object-fit: cover换成object-fit: contain。这样图片会在TD内完整展示，上下或左右可能会留空白，但TD的高度依然会和无图状态保持一致：

<div style='height:300px;width:300px;'>
  <table style='height:100%;width:100%;'>
    <tr>
      <td style='position: relative; overflow: hidden;'>
        <img src="你的图片URL" style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;'>
      </td>
    </tr>
  </table>
</div>

额外说明： #

因为你的父级容器是响应式的，当它的尺寸变化时（比如宽度调整，高度按比例变化），TD的高度会自动跟随父级调整，图片也会同步适配这个高度，完全不会再用原始高度撑开单元格。

内容的提问来源于stack exchange，提问作者Malooii