aspect-ratio 不能直接用于 元素，因其属于表格格式化上下文，尺寸由表格算法决定，且 display: table-cell 被明确排除在 aspect-ratio 支持范围外；正确做法是在 内嵌套块级元素并应用 aspect-ratio，同时确保宽度约束与内容适配。
aspect-ratio 不能直接用在 <td> 上——写了也无效，浏览器静默忽略，单元格该塌陷还是塌陷，该拉伸还是拉伸。
<h3>为什么 <code>td { aspect-ratio: 1 / 1 } 完全没反应
表格单元格（<td>）属于表格格式化上下文（table formatting context），其尺寸由表格算法统一计算，不参与 CSS 的正常流布局。而 <code>aspect-ratio 只对块级、弹性或网格子项生效，display: table-cell 被明确排除在外。即使你在开发者工具里看到样式已加载，高度也不会按比例推导。
- 常见现象：
td高度随文字行数或图片原始尺寸浮动，aspect-ratio声明灰掉或显示“invalid” - 哪怕强行加
display: block，会破坏vertical-align、边框合并、列宽自动分配等表格核心行为 -
table-layout: fixed下若未用<col>或width显式定义列宽，子容器连宽度基准都没有，aspect-ratio更无从算起
正确做法：在 <td> 内嵌套 <code><div> 并设 <code>aspect-ratio
必须把比例逻辑下移到语义安全的块级容器上，<td> 只负责结构定位。
<ul><li><code><td> 需设明确宽度约束，如 <code>width: 200px 或 min-width: 200px；若用百分比，确保父 <table> 有 <code>table-layout: fixed 和列宽定义
<div class="square-box"> 必须设：<code>aspect-ratio: 1 / 1、width: 100%、height: auto，且**不能写 height、min-height、line-height**
<img> 或 <video></video>）要设：width: 100%、height: 100%、object-fit: cover（或 contain），并移除 HTML 属性里的 width/height
Safari 15.3 及更早版本的降级方案
这些环境完全不识别 aspect-ratio，且 <td> 的 <code>padding-bottom hack 也失效（因 display: table-cell 不支持基于宽度的百分比 padding）。
- 降级必须作用于嵌套的
<div>，而非 <code><td> 本身 <li>给该 <code><div> 设：<code>position: relative、width: 100%、height: 0、padding-bottom: 100% - 再用
::before或绝对定位子元素铺满：position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必用
@supports not (aspect-ratio: 1)包裹降级样式，避免现代浏览器误用 - 父容器设：
display: grid、grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))、gap: 12px - 每个子项（
<article></article>或<div>）直接设：<code>aspect-ratio: 1 / 1、width: 100% - 语义可用
<section role="grid"></section>+<article role="gridcell"></article>补齐可访问性 - 旧版 Safari 兼容也更稳：
@supports not (aspect-ratio: 1)降级到padding-bottom方案时，Grid 容器仍保持结构完整性
更干净的替代方案：别用 <table>，改用 <code>display: grid
如果你的“表格”只是视觉网格（比如图库、仪表盘、商品列表），<table> 是过度设计。Grid 天然支持 <code>aspect-ratio，且无需嵌套容器。
真正容易被忽略的是：就算 aspect-ratio 生效了，里面图片若没配 object-fit，依然会留白或拉伸——比例控制形状，不控制内容铺法，这两件事必须分开处理。
