aspect-ratio 仅约束宽高比，不自动响应式缩放；需配合 width: 100% 等显式尺寸控制才能生效，且 content-box 下计算，box-sizing: border-box 会影响可视比例，旧浏览器需 padding-top trick + @supports 覆盖。
aspect-ratio 设置后宽高不随父容器缩放？
默认情况下，aspect-ratio 只约束元素自身的宽高比，但不会自动让元素“响应式缩放”。如果父容器有固定尺寸或 max-width 限制，而子元素又没设 width: 100% 或类似约束，它可能保持原始尺寸、溢出或留白。
关键点：必须显式控制至少一个轴向的尺寸（通常是 width），aspect-ratio 才能据此推算另一轴。否则浏览器无法确定“按什么基数来维持比例”。
- 推荐写法：
width: 100%; aspect-ratio: 16 / 9;—— 宽随父容器变，高自动计算 - 避免只写
aspect-ratio: 1 / 1;且无宽高约束，此时元素可能渲染为 0×0 或依赖内容撑开 - 若用
max-width，需配合width: 100%，否则max-width不生效
box-sizing: border-box 对 aspect-ratio 有影响吗？
有，但仅在你手动设置了 padding 或 border 时才体现。因为 aspect-ratio 计算的是 **content box 的宽高比**（规范明确），而 box-sizing: border-box 会让 width 和 height 包含 padding 和 border —— 这会导致实际 content area 缩小，从而破坏你期望的比例。
- 典型问题：设了
width: 300px; height: 300px; aspect-ratio: 1 / 1; padding: 20px; box-sizing: border-box;→ content 区变成 260×260，比例仍是 1:1，但视觉上“框”变厚了，内容被压缩 - 安全做法：对需要精确比例的容器，统一用
box-sizing: content-box（默认值），或干脆避免在该元素上设 padding/border；如必须加内边距，改用伪元素或子容器承载 - 注意：
aspect-ratio不受box-sizing影响其计算逻辑，但它会影响你对“最终可见区域”的预期
旧浏览器 fallback 方案怎么写才不冲突？
Chrome 88+、Firefox 89+、Safari 15.4+ 支持 aspect-ratio，但 IE 和旧 Safari 需降级。常见错误是用 @supports 包裹整个规则却漏掉重置逻辑，导致新旧样式叠加出错。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：先写兼容写法（如 padding-top 百分比 trick），再用
@supports (aspect-ratio: 1 / 1)覆盖它 - 示例：
div.aspect-box { width: 100%; position: relative; } div.aspect-box::before { content: ""; display: block; padding-top: 56.25%; /* 16:9 */ } div.aspect-box > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @supports (aspect-ratio: 1 / 1) { div.aspect-box { aspect-ratio: 16 / 9; padding-top: 0; } div.aspect-box::before, div.aspect-box > * { position: static; } } - 切记：padding-top trick 依赖
position: relative+ 伪元素，不能和aspect-ratio同时启用，否则高度重复计算
flex 或 grid 容器里 aspect-ratio 表现异常？
在 display: flex 或 grid 子项中，aspect-ratio 仍有效，但会受父容器的尺寸分配策略干扰。比如 flex 项目默认 flex-basis: auto，若父容器没给明确主轴尺寸，子项可能被压缩到最小内容宽，导致 aspect-ratio 失效。
- Flex 场景下，加
flex: 1或flex: 0 1 auto并确保父容器有明确宽度，比单纯靠aspect-ratio更可靠 - Grid 中，若用
grid-template-columns: 1fr，子项会拉满，aspect-ratio正常工作；但若列定义是minmax(300px, 1fr)，且内容窄，它可能不触发缩放 - 调试建议：在 DevTools 里检查 computed
width和height，确认是否真被aspect-ratio计算出来，还是被 flex/grid 的布局算法覆盖了
真正容易被忽略的是：当你把 aspect-ratio 用在图片、视频或 iframe 上时，它们自带默认宽高，会优先于 aspect-ratio 生效。必须显式重置 width 和 height（比如设为 auto 或 100%），比例约束才能接管。
