固定宽高比容器设置教程

• 写法：aspect-ratio: 16 / 9（注意斜杠前后有空格，不能写成 16/9）
• 必须配合 width 或 max-width 使用，否则容器可能塌缩为 0
• 若同时设了 height，aspect-ratio 会被忽略（CSS 优先级规则）
• Safari 15.4+ 才完整支持，低于此版本需降级方案

兼容老浏览器：用 padding-top 百分比模拟 aspect-ratio

这是最成熟、兼容 IE9+ 的方案，核心是利用「块级元素的 padding-top 百分比基于父容器宽度计算」这一特性。

适用场景：需要支持 Safari 15.3 及更早、或某些安卓 WebView（如 UC 内核）。

• 容器设 position: relative，子元素 设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
• 容器自身不设 height，改用 padding-top: 56.25%（对应 16:9 → 9 ÷ 16 = 0.5625）
• 如果图要居中裁剪， 加 object-fit: cover；拉伸填充则用 object-fit: fill
• 注意：百分比 padding 值必须手动算，4:3 是 75%，1:1 是 100%，别记混

的 width 和 height 属性还有用吗？

有用，但作用变了：它们现在主要提供**固有尺寸（intrinsic size）**，用于计算 aspect-ratio 的初始值，而不是强制布局尺寸。

比如 ，浏览器会自动推导出 aspect-ratio: 4 / 3，即使你没显式写。

• 保留 width/height 能避免 layout shift（内容跳动），尤其 SSR 或首屏渲染时
• 但它们不响应式——如果容器变窄，图片仍按原始像素缩放，可能模糊或变形
• 现代写法建议：留着这两个属性，再用 CSS 控制实际尺寸，例如 img { width: 100%; height: auto; }
• 不要只设其中一个（比如只设 width），否则浏览器无法推导宽高比，aspect-ratio 失效

为什么 object-fit 和 aspect-ratio 要配着用？

aspect-ratio 只管容器形状，不管里面图片怎么铺；object-fit 才决定图片在该容器里是裁剪、拉伸还是保持比例。

典型组合：

• aspect-ratio: 16 / 9; object-fit: cover → 图片居中裁剪填满（常用封面图）
• aspect-ratio: 4 / 3; object-fit: contain → 图片完整显示，上下/左右留白（适合证件照）
• object-fit: none 会强行拉伸变形，慎用——除非你明确要像素风效果
• 注意：Safari 对 object-fit 支持早于 aspect-ratio，所以降级方案里它仍是关键一环

真正麻烦的是混合场景：比如一个卡片组件既要适配不同屏幕，又要兼容微信内置浏览器（X5 内核）、老版 Edge，还得防止图片加载前闪动。这时候 padding-top 方案虽然啰嗦，但比一堆 JS 计算或 polyfill 更稳。

好了，本文到此结束，带大家了解了《固定宽高比容器设置教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！