如何使图片占满响应式高度表格中可变高度td的100%高度？

我太懂这种卡壳的感觉了——明明给图片设了height:100%，结果它还是我行我素撑破表格行，变回原始尺寸。这问题根源在于表格的默认布局规则：行高会跟着内容自动调整，单纯给图片加高度约束根本没参考基准，得从表格和行的布局逻辑一起改才行。

核心修复方案：给表格加布局约束+图片适配规则 #

直接给你调整后的测试代码，每一步的修改都标清楚了：

<table style='height:50%;width:50%;table-layout: fixed;'>
  <tr style='height: calc(100% - 2em);'> <!-- 手动分配第一行高度，预留第二行的空间 -->
    <td style='padding:0;'> <!-- 去掉td内边距，避免图片被挤压或留空隙 -->
      <img style='height:100%;width:100%;object-fit: cover;' src='https://placehold.it/192x1200'>
    </td>
  </tr>
  <tr style='height:2em;'> <!-- 固定第二行高度，让第一行的高度约束生效 -->
    <td> bob </td>
  </tr>
</table>

关键修改点拆解： #

• table-layout: fixed：强制表格按设定的宽高布局，不让内容随意撑大表格，这是约束行高的前提。
• 给每行分配明确高度：用calc计算第一行高度，让它占满表格剩余空间，这样图片的height:100%才有明确的参考值。
• object-fit: cover：保证图片在填满td的同时，保持自身比例不拉伸（如果想要完整显示图片不留空白，换成object-fit: contain就行）。
• 去掉td内边距：避免内边距导致图片和td边界出现空隙，或者图片被挤压溢出。

要是觉得表格布局太麻烦，也可以用flex布局替代表格，逻辑更直观：

<div style='height:50%;width:50%;display:flex;flex-direction:column;'>
  <div style='flex:1;'> <!-- 让第一块自动占满剩余高度 -->
    <img style='height:100%;width:100%;object-fit:cover;' src='https://placehold.it/192x1200'>
  </div>
  <div>bob</div> <!-- 第二块自动适应内容高度 -->
</div>

这种方式完全绕开了表格的布局坑，适配起来更省心。

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