如何实现表格单元格等高且防止图片撑大表格（不设固定高度）

完全可以实现，不需要给表格设置固定高度。核心思路是让表格行的高度由右侧的文本内容决定，再强制左侧图片单元格和图片继承这个高度，同时保持图片的宽高比。

解决方案代码： #

table {
  border-collapse: collapse; /* 可选，优化表格边框显示 */
}

td {
  background-color: RebeccaPurple;
  padding: 0;
  vertical-align: top;
  height: 100%; /* 让单元格继承行的高度 */
}

td img {
  height: 100%; /* 图片高度匹配单元格高度 */
  width: auto; /* 保持图片原始宽高比 */
  object-fit: cover; /* 可选：填满单元格，裁剪超出部分；换成contain则完整显示图片，可能留空白 */
}

<table>
  <tr>
    <td><img src="https://picsum.photos/500"></td>
    <td>
      <p>hhhh placeholder hhhh</p>
      <p>hhhh placeholder hhhh</p>
      <p>hhhh placeholder hhhh</p>
      <p>hhhh placeholder hhhh</p>
    </td>
  </tr>
</table>

原理说明： #

• 表格行的高度会自动适配右侧单元格中文本内容的高度，不需要手动设置固定值。
• td { height: 100% } 让左侧单元格强制继承行的高度，确保和右侧等高。
• img { height: 100%; width: auto } 让图片高度匹配单元格，同时维持宽高比，避免拉伸变形。
• object-fit: cover 可以让图片填满整个单元格（超出部分会被裁剪），如果希望完整显示图片，换成object-fit: contain即可，此时图片会在单元格内按比例缩放，可能上下或左右留空白。

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