最推荐用 aspect-ratio 实现宽高比控制，如 aspect-ratio: 16 / 9，简洁高效且不触发重排，但需注意 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持；老旧环境须搭配 padding-top 百分比技巧降级。
用 aspect-ratio 最直接，但得看浏览器是否撑得住
现代 CSS 的 aspect-ratio 是专为这事设计的，写一行就能锁住宽高比，比如 aspect-ratio: 16 / 9。它不依赖内容、不触发重排，比 padding-top 技巧干净得多。
但问题在兼容性：aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才稳定支持。如果你的项目还要跑在旧版 iOS 或企业内网 IE/Edge Legacy 上，它会直接被忽略——元素退化成默认尺寸，可能塌缩或撑开。
实操建议：
- 先确认目标用户浏览器分布，用 caniuse 查真实覆盖率
- 若需兼容老环境，必须搭配降级方案（见下一条），不能只写
aspect-ratio - 慎用于 Flex/Grid 子项：某些老版本 Safari 在
flex容器里会忽略该属性，得加min-width: 0或min-height: 0触发重新计算
padding-top 百分比技巧仍有效，但必须配合绝对定位
这是最广谱的兼容方案，原理是利用 padding-top 的百分比值基于父容器宽度计算，从而“挤出”固定比例空间。但它本身不产生高度，必须靠子元素脱离文档流来占位。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：padding-top: 56.25% 写了，但容器还是塌陷——因为没设 position: relative，也没给子元素加 position: absolute 和全向定位。
使用场景：需要支持 IE11、Android 4.4 WebView、早期微信内置浏览器等。
实操建议：
- 父容器设
position: relative和width: 100%（确保百分比有基准） - 内部包裹一层
div，设padding-top: 56.25%（16:9）或75%（4:3） - 真正内容层用
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别忘了给父容器设
overflow: hidden，防止子内容溢出破坏布局
用 object-fit 控制媒体元素变形，不是布局手段
object-fit 常被误当作“保持长宽比”的布局解法，其实它只作用于替换元素（<img alt="CSS布局如何处理不同分辨率下的长宽比约束以防止变形" >、<video></video>、<iframe></iframe>），控制的是内容如何适应其盒模型，不改变盒子本身的尺寸。
典型踩坑：给一个 <div> 设 <code>object-fit: cover —— 没用，该属性对普通 div 完全无效，CSS 会静默丢弃。
性能影响：在低端 Android 设备上，object-fit: cover + 高清图可能引发渲染卡顿，尤其配合 transform 动画时。
实操建议：
- 只用在
<img alt="CSS布局如何处理不同分辨率下的长宽比约束以防止变形" >或<video></video>上，并确保父容器已通过aspect-ratio或 padding 技巧固定了尺寸 - 避免和
border-radius同时高频使用，部分旧版 Chrome 渲染圆角 + object-fit 会出现边缘锯齿 - 若需响应式裁剪，优先用
object-position调整焦点，而不是 JS 计算偏移
JS 动态计算 fallback 仅在必要时介入
纯 CSS 搞不定时（比如要根据窗口宽高比实时切换 16:9 / 4:3 / 1:1），才轮到 JS。但它的代价明显：监听 resize 事件、手动设置 style.height、可能触发强制同步布局（Layout Thrashing）。
容易被忽略的点：很多脚本直接在 resize 里改 height，但没节流，快速拖拽窗口时 CPU 爆涨；或者没监听 orientationchange，横竖屏切换后比例错乱。
实操建议：
- 用
ResizeObserver替代resize事件，只响应目标元素尺寸变化，更精准且可自动节流 - 计算高度时，用
getBoundingClientRect()读取当前宽度，别依赖window.innerWidth——后者含滚动条，且不反映元素实际可用宽度 - 如果只是为适配少数几个断点（如手机/平板/桌面），优先用 CSS 媒体查询 +
aspect-ratio，JS 仅兜底极特殊逻辑
最麻烦的其实是混合场景：比如一个卡片组件既要适配不同屏幕，又要支持用户上传任意比例图片，还得在 SSR 环境下首屏不闪动。这时候没有银弹，得按浏览器能力分层，CSS 主力，JS 补漏，padding 技巧守底——而且每一层都得测真机，模拟器骗不了人。
