仅设 width: 100% + height: auto 无法保证等比缩放，因 height: auto 依赖图片已加载并具备原始尺寸信息；若图片延迟加载、懒加载或动态设置 src，浏览器无法获取宽高，导致高度塌陷、布局跳动。aspect-ratio 是 CSS 原生宽高比属性，不依赖图片是否加载，直接在盒模型层面维持比例，解决响应式下容器高度不可控问题。
移动端图片等比例缩放为什么不能只靠 width: 100%
直接设 width: 100% + height: auto 看似能保持比例，但前提是图片本身有原始尺寸信息。实际中常遇到：图片加载延迟、src 动态设置、或使用懒加载（如 loading="lazy"）时，浏览器在图未加载前无法获取宽高，导致父容器高度塌陷、布局跳动、甚至影响下方内容流。
aspect-ratio 是什么，它解决的是哪类问题
aspect-ratio 是 CSS 原生指定宽高比的属性，让容器（包括 width/height 属性，对响应式图片尤其友好。
注意：它作用的是「盒模型」，不是图片渲染逻辑 —— 所以需确保图片自身不强行拉伸（比如没加 object-fit: cover 或 contain）。
- 支持值形式：
aspect-ratio: 16 / 9（推荐写法）、aspect-ratio: 1.777（不推荐，精度和可读性差） - 可与
width配合使用，height会自动计算；若同时设了height，则aspect-ratio被忽略 - 在
-webkit-aspect-ratio前缀（仅 iOS 15.4 及更早）
怎么用 aspect-ratio 实现真正稳定的图片容器
最佳实践是「包裹一层容器」，而非直接在
<div class="img-container"> @@##@@ </div>
.img-container 设置 aspect-ratio 和 overflow: hidden，
.img-container {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
position: relative;
}
.img-container img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，按需选 */
top: 0;
left: 0;
}
- 不用
max-width或height: auto，它们会和aspect-ratio冲突 - 若图片要完整显示（不裁剪），改用
object-fit: contain，并考虑加背景色防留白 - 服务端返回不同比例图时，别写死
aspect-ratio值 —— 可通过 HTMLdata-属性传入，再用 CSS 自定义属性动态绑定
兼容性兜底方案：什么时候必须回退到伪元素
当项目仍需支持 iOS 15.3 或 Android UC 浏览器等不支持 aspect-ratio 的环境时，得用传统方案。最稳的是伪元素 + padding-top 百分比技巧：
.img-container::before {
content: "";
display: block;
padding-top: calc(3 / 4 * 100%); /* 4:3 → 75% */
}
但要注意：padding-top 的百分比是相对于父容器宽度计算的，所以父容器必须有明确宽度（比如 width: 100%），且子 position: absolute 脱离文档流。
- 这个方案在 flex/grid 容器里可能失效，因为某些老版本浏览器不正确解析伪元素的 padding 计算上下文
- 如果图片是背景图，优先用
background-size: cover+padding-top，比 - 不要试图用 JS 读取图片 naturalWidth/naturalHeight 来动态设 height —— 懒加载、跨域、CORS 都会让它不可靠
真正麻烦的不是写法，而是比例值从哪来。CMS 返回的图片元信息经常缺失或不准，前端硬编码又难维护 —— 这块得和后端约定好接口字段，或者用 image decoder API（仍在实验阶段）做运行时探测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
