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

表格单元格里加 object-fit: cover 为什么没反应？

不是属性写错了，而是 <td> 默认没有可计算高度——表格行高由内容撑开，图片原始尺寸又反过来决定行高，形成死循环。浏览器根本不知道“往多大框里 fit”，<code>object-fit 直接被忽略。

• <td> 只设了 <code>width: 100%，但没设 height 或 min-height，也没用 aspect-ratio
• 父级 <tr> 没设固定高度，<code><td> 高度随图片原始尺寸浮动 <li>用了 <code>vertical-align: middle 但没配 line-height 或容器高度，对 object-fit 无影响
• 在 <table> 上直接写 <code>object-fit —— 无效，它只作用于替换元素（<img>）本身

  必须给 <img> 和它的容器同时加约束

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

  • <td> 设 <code>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> 加 <code>overflow: hidden;，否则裁剪部分会溢出破坏表格边框
  • 避免在 <img> 上同时写 max-width: 100% 和 width: 100%，Safari 旧版可能重排异常

  表格布局下 object-fit: cover 和 contain 怎么选？

  这不是风格问题，是语义绑定：

  
  html-deploy
  使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。
  下载
  • object-fit: cover：适合商品图、头像、封面类图片——填满单元格无留白，但默认裁剪中心，人脸常被切掉；必须配 object-position: center top 微调锚点
  • object-fit: contain：适合证件照、图标、说明书插图——整张图必须可见，留白由 <td> 的 <code>background-color 补上；此时 object-position 基本无效
  • 绝对别用 object-fit: fill，它就是拉伸变形的代名词，和没写一样

  iOS Safari 13.3 及更早版本的兼容性陷阱

  这些版本完全不支持 object-fit 在 <img> 上生效，加 -webkit-object-fit 也无效，会静默退化成 fill 行为（即拉伸）。

  • 真机测试时，横屏切换可能让 aspect-ratio 失效，导致高度突变，cover 缩成小图
  • 稳妥降级方案：用 background-image 替代，background-size: cover + background-position，但会丢失 alt、SEO 和原生懒加载
  • 关键业务场景（如用户头像）建议服务端预裁剪为固定比例，绕过前端适配
  真正容易被忽略的是：表格中每个 <td> 都是一个独立渲染上下文，你写的每一条 <code>object-fit 规则，都依赖该单元格存在稳定、可测量的宽高基准——这个“盒子”一旦塌陷，所有样式就归零。

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