object-fit: cover在表格中无效是因为<td>无固定高度，导致浏览器无法确定裁剪容器尺寸；必须为<td>设置宽高约束（如aspect-ratio或padding-bottom）并配合<img>的width/height/object-fit/overflow等属性协同生效。

为什么里设了object-fit: cover却没反应

不是CSS写错了，而是浏览器根本没机会执行它——<td>默认没有可计算的高度，object-fit需要一个明确的“容器边界”才能裁剪或缩放。表格行高由内容撑开，图片又反过来决定行高，形成死循环。结果就是：哪怕你给<img>写了width: 100%; height: 100%; object-fit: cover;，它还是按原始尺寸渲染。

常见错误包括：
• <td>只设了width: 100%，没配height、min-height或aspect-ratio
• <tr>没设固定高度，<td>高度随图片浮动
• 在<table>或<tr>上直接写object-fit——该属性只对替换元素（如<img>）本身生效
• 忘了加overflow: hidden，裁剪部分溢出破坏边框

必须同时约束容器和图片

单靠object-fit不够，得让浏览器明确知道“盒子在哪”。推荐组合：

• <td>设width: 100%; aspect-ratio: 16 / 9;（现代浏览器），或 fallback 用padding-bottom: 56.25% + position: relative
• <img>写display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
• <td>加overflow: hidden;，否则裁剪边缘会破框
• 避免在<img>上同时写max-width: 100%和width: 100%，Safari旧版可能重排异常

想用百分比高度？先给定高

height: 80%这类写法在<img>上几乎总无效，因为它的父级<td>没有高度基准。百分比高度必须有明确的祖先高度上下文。

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

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

正确做法：
• 给<td>显式设高，比如height: 120px或height: 15vh（响应式更稳）
• 图片用height: 90%; width: auto;保比例，别写width: 100%; height: 100%
• 删掉老式height="50"这类HTML属性，它们和CSS混用时行为不可控
• 加vertical-align: middle可辅助垂直居中，但需配合line-height或容器高度才有效

IE不支持怎么办

IE完全不识别object-fit，老项目一跑就露馅。降级方案只有两个靠谱路径：

• 用background-image替代<img>，配合background-size: cover和background-position，语义性下降但兼容性拉满
• 用JS检测支持性，不支持时动态替换为<div style="background-image: url(...)">结构
• 别指望object-fit: scale-down兜底——它在IE里同样无效，且行为依赖none和contain，这两者IE也不认

最常被忽略的是：object-position必须和object-fit搭配才生效；单独设它等于白写。还有，table-layout: fixed虽能强制列宽，但对行高无直接帮助，别把它当万能解。