如何让图片适配响应式td高度？div正常td却被图片撑大

这个问题本质是表格布局的特性差异导致的——表格单元格（td）默认会优先根据内部内容的固有尺寸来调整自身大小，而像div这类块级元素是严格遵循我们设置的宽高规则，所以才会出现你遇到的情况。下面给你两个实用的解决方案：

方案一：固定表格布局+限制图片尺寸 #

通过设置table-layout: fixed强制表格遵循我们定义的宽高，再约束图片的尺寸使其适配td：

<table style='height:50%;width:50%;table-layout: fixed;'>
  <tr>
    <td style='height: 100%;width: 100%;overflow: hidden;'>
      <img style='height: 100%;width: auto;object-fit: contain;' src='https://placehold.it/200x1000'>
    </td>
  </tr>
</table>

• table-layout: fixed：让表格优先使用我们设置的宽高，不再被内容撑开
• td设置overflow: hidden：避免图片超出单元格范围
• 图片用height: 100%占满td高度，width: auto保持图片原有比例，object-fit: contain确保图片完整显示（如果需要让图片填充整个单元格可以换成object-fit: cover）

方案二：绝对定位图片脱离文档流 #

通过绝对定位让图片脱离文档流，这样它就不会撑开td，而是直接适配td的尺寸：

<table style='height:50%;width:50%;'>
  <tr>
    <td style='height: 100%;width: 100%;position: relative;overflow: hidden;'>
      <img style='position: absolute;top: 0;left: 0;height: 100%;width: auto;object-fit: contain;' src='https://placehold.it/200x1000'>
    </td>
  </tr>
</table>

• td设置position: relative：作为绝对定位图片的参考容器
• 图片绝对定位后会脱离文档流，不会影响td的尺寸计算，同时height: 100%会让它完全适配td的高度

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