aspect-ratio仅在宽度可测、高度未锁定时生效，否则浏览器跳过计算；必须配合width/max-width且禁用height声明，作用于块级容器而非img/video等替换元素。
aspect-ratio 不是“设了就生效”的尺寸控制属性，它只在宽度可测、高度未锁定时参与推导——90% 的失效问题都卡在这一步。
为什么写了 aspect-ratio: 16 / 9 却没高度？
浏览器不会凭空算出高度，它需要一个已知的宽度作为计算基准。如果容器宽度为 auto 且父级无约束（比如 display: inline-block 或 Flex 子项未设 flex-basis），或者你显式写了 height: auto、height: 100%，浏览器就认为高度已确定，直接跳过 aspect-ratio。
常见失效组合：
-
aspect-ratio: 16 / 9单独写，没配width或max-width→ 宽度为 0，高度也为 0 -
width: 100%; height: 100%同时存在 →aspect-ratio被完全忽略 -
display: inline或float: left的元素 → 不触发盒模型比例推导 - 用在
<img>或<video></video>标签上 → 替换元素不支持，必须用外层<div> 包裹<h3>怎样写才真正稳定生效？</h3> <p>核心就两条：宽度可测 + 高度未锁定。推荐以下两种安全写法：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>width: 100%; aspect-ratio: 16 / 9;→ 适合响应式卡片、列表项，随父级变宽，高度自动算出 -
max-width: 400px; aspect-ratio: 4 / 3;→ 更稳妥，width可省略（默认auto仍能触发计算）
Grid/Flex 场景下，只要列轨道或主轴有约束（如 grid-template-columns: 1fr 200px），子项就能基于所在轨道宽度生效；但若子项设了 flex: 0 0 auto 或 align-items: stretch 强行撑高，就会覆盖比例计算。
和 object-fit 配合时容易踩的坑
aspect-ratio 只管容器“框”的比例，不管里面图片怎么铺。漏配 object-fit 或尺寸声明，图片照样拉伸变形或溢出。
-
<img>必须加width: 100%; height: 100%，否则object-fit不触发 -
object-fit: cover最常用，但会裁边；contain保留完整但留白；fill强制拉满，必失真 - 别给
<img>直接设aspect-ratio—— 替换元素不参与布局计算，写了也无效
兼容性与降级方案
Safari 15.3 及更早版本完全忽略 aspect-ratio，Chrome 桌面版看似正常但本质回退到 intrinsic 尺寸，不可靠。若需兼容旧环境，必须 fallback 到 padding-bottom hack：
- 父容器设
position: relative; width: 100%; height: 0 - 用
padding-bottom: calc((原始高度 / 原始宽度) * 100%)，例如 800×600 →75% -
<img>设position: absolute; top: 0; left: 0; width: 100%; height: 100%
真机测试不能跳过，尤其安卓 WebView（UC、旧版 Samsung Browser）对 object-fit 支持不稳定。别用文件名猜比例——cover-16x9.jpg 不代表就是 16:9。
