为何下方设height:100%的td无法让上方图片td收缩适配内容？

核心原因：表格单元格的高度逻辑和CSS高度的优先级 #

你遇到的问题本质是表格布局的内容优先特性，以及你对CSS height 属性在表格中的作用理解偏差：

1. 表格单元格的 height 属性默认是最小高度，不是硬性上限。如果单元格内的图片实际高度超过了你设置的 1.5cm，浏览器会优先撑开单元格来容纳内容，而不是强制收缩图片或单元格高度。
2. 你给 .description 单元格设置的 height:100% 无效——百分比高度需要父元素（这里是表格）有明确的固定高度值，否则浏览器无法计算出“100%”对应的具体尺寸，自然无法挤压上方的 .image 单元格。

解决思路与代码示例 #

要实现你的需求，需要从表格整体布局、单元格限制、图片缩放三个层面调整：

/* 强制表格遵循设定的尺寸规则，避免内容自动撑开 */
.image-table {
  table-layout: fixed;
  width: 100%;
  /* 给表格设置固定总高度，让两个单元格的高度分配有依据 */
  height: 3cm; 
}

/* 限制图片单元格的最大高度，超出部分隐藏 */
.image {
  max-height: 1.5cm;
  overflow: hidden;
  vertical-align: top;
}

/* 让图片在单元格内按比例缩放，最大高度不超过单元格 */
.image img {
  max-height: 100%;
  width: auto;
  display: block; /* 消除图片默认行内元素带来的底部空白 */
}

/* 描述单元格自动占用表格剩余高度，无需设置height:100% */
.description {
  padding: 8px;
}

<table class="image-table" border="1">
  <tr>
    <td class="image">
      <img src="your-image-url" alt="示例图片">
    </td>
  </tr>
  <tr>
    <td class="description">这里是描述内容，会自动占用表格剩余高度</td>
  </tr>
</table>

关键调整说明 #

• table-layout: fixed：强制表格使用你设定的宽度/高度规则，而非根据内容自动调整布局。
• 给表格设置固定总高度：让浏览器能明确分配 .image 和 .description 的高度空间，当描述内容占用空间时，图片单元格会被限制在 max-height:1.5cm 内。
• 图片设置 max-height:100% + width:auto：确保图片在不超出单元格高度的前提下，保持原有宽高比缩放。

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