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

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

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

常见错误包括：
• 只设了width: 100%，没配height、min-height或aspect-ratio
• 没设固定高度，高度随图片浮动
• 在

或上直接写object-fit——该属性只对替换元素（如）本身生效
• 忘了加overflow: hidden，裁剪部分溢出破坏边框

必须同时约束容器和图片

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

设width: 100%; aspect-ratio: 16 / 9;（现代浏览器），或 fallback 用padding-bottom: 56.25% + position: relative 写display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;

加overflow: hidden;，否则裁剪边缘会破框 避免在上同时写max-width: 100%和width: 100%，Safari旧版可能重排异常 想用百分比高度？先给

定高 height: 80%这类写法在上几乎总无效，因为它的父级

没有高度基准。百分比高度必须有明确的祖先高度上下文。 正确做法： • 给

显式设高，比如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，老项目一跑就露馅。降级方案只有两个靠谱路径： 使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审 使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。 下载 • 用background-image替代，配合background-size: cover和background-position，语义性下降但兼容性拉满 • 用JS检测支持性，不支持时动态替换为 结构 • 别指望object-fit: scale-down兜底——它在IE里同样无效，且行为依赖none和contain，这两者IE也不认 最常被忽略的是：object-position必须和object-fit搭配才生效；单独设它等于白写。还有，table-layout: fixed虽能强制列宽，但对行高无直接帮助，别把它当万能解。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！