图片在表格中设高度百分比生效的关键是为及祖先链提供明确高度上下文；需显式设置高度（如120px或15vh），图片再用height:90%;width:auto;保比例，并清除旧式height属性。

图片在表格中设高度百分比，关键不在图片本身，而在于表格单元格（<td>）和整条祖先链是否具备可计算的高度上下文。单纯给 <code><img alt="HTML怎么设置图片在表格中的高度百分比" > 写 height: 50% 几乎总无效，因为它的父元素（<td>）默认高度由内容撑开，没有明确高度，百分比就无从算起。 <h3>确保 <code><td> 有明确高度 <p>表格单元格默认是“包裹内容”的，不设高就不会有高度基准。必须显式给 <code><td> 设置一个确定的高度（像素或视口单位），百分比图片才能生效： <ul> <li>用 <code>height: 120px 或 height: 20vh 直接定义单元格高度

避免只写 height: auto 或留空，那样图片的 height: 80% 仍会失效

若需响应式，推荐用 vh（如 height: 15vh）比百分比更可靠

图片自身用相对高度 + 自动宽高比

在已有高度的 <td> 内，图片可安全使用百分比高度，并配合 <code>width: auto 保持比例：

• <img src="a.jpg" style="max-width:90%" alt="HTML怎么设置图片在表格中的高度百分比" > —— 高度占满单元格的90%，宽度自动适配
• 不建议同时设 width: 100%; height: 100%，易拉伸变形；优先保比例
• 加 vertical-align: middle 可让图片在单元格内垂直居中

避免老式 HTML 属性干扰

不要混用过时的 height 和 width 标签属性与 CSS，它们行为不一致且优先级混乱：

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 删掉类似 <td height="100"> 或 <code><img style="max-width:90%" alt="HTML怎么设置图片在表格中的高度百分比" > 这类内联属性
• 统一用 CSS 控制：style="height: 100px;" 或外链样式表
• 老式属性对百分比支持差，尤其在现代浏览器中常被忽略

备选：用 Flex 布局替代传统表格单元格

如果目标是让图片在“类表格”区域里自适应高度，Flex 更可控：

• 把 <td> 换成 <code><div class="cell">，并设 <code>display: flex; align-items: center;
• 图片设 height: 80%; width: auto;，flex 容器提供明确高度上下文
• 这种方式规避了表格渲染逻辑限制，适合复杂响应需求