优先用 aspect-ratio 实现等比缩放，需配合 width: 100% 且不与 height 冲突；iOS Safari ≤15.3 需回退 padding-bottom + 绝对定位；max-width: 100% 和 height: auto 失效主因是父容器无宽或图片未加载导致尺寸不可知。
现代移动端图片等比缩放，优先用 aspect-ratio；若需兼容 iOS Safari ≤15.3，则必须回退到 padding-bottom + 绝对定位方案。
为什么只写 max-width: 100% 和 height: auto 常常失效
这不是属性写错了，而是缺少关键上下文约束：
-
max-width: 100%的百分比基准是父容器宽度 —— 如果父容器本身没宽度（比如display: flex下未设flex-shrink: 0或min-width），它就无从计算 -
height: auto依赖图片已知原始尺寸 —— 懒加载、动态src、或图片未加载完成时，浏览器拿不到宽高，高度直接塌陷成 0 -
<img>默认是inline元素 —— 底部会多出约 4px 空隙，视觉上像“缩放不到位”，必须加display: block - 写了
width: 300px或height: 200px这类固定值，会直接覆盖max-width和height: auto的响应逻辑
用 aspect-ratio 实现真正可控的等比缩放
它不依赖图片是否加载，也不需要 JS，直接在盒模型层面锁定比例：
- 写法统一：用
aspect-ratio: 16 / 9（推荐分数形式），不要用小数如1.777 - 必须配合
width: 100%或具体宽度值 ——aspect-ratio只推导高度，不设定尺寸本身 - 不能和
height同时设为具体值，否则aspect-ratio被忽略 - 移动端支持情况：
iOS Safari 15.4+、Chrome Android 100+、Firefox Android 102+；旧版完全不识别，会降级为内容撑开 - 建议用
@supports (aspect-ratio: 1/1)包裹规则，做渐进增强
兼容老版 Safari 的 padding-bottom 回退方案
原理是利用 padding-bottom 百分比始终基于父容器宽度计算的特性：
立即学习“前端免费学习笔记（深入）”；
- 对于 4:3 图片，宽高比 = 3 ÷ 4 = 0.75 → 写
padding-bottom: 75% - 外层容器设
position: relative; overflow: hidden，内层<img>设position: absolute; width: 100%; height: 100% - 必须加
object-fit: cover或contain，否则图片会拉伸变形 - 缺点明显：DOM 多一层包裹、语义性差、无法响应图片真实加载尺寸、且
padding-bottom值需手动计算，服务端返回不同比例图时难动态适配
object-fit 不是等比缩放的替代方案，而是裁剪策略
它解决的是「图片如何填满一个已有宽高的容器」，不是「如何让容器随图片比例自适应」：
-
object-fit: contain→ 完整显示，可能留白；适合文档截图、图表 -
object-fit: cover→ 填满容器，可能裁剪；适合头像、封面图 - 它必须和
width: 100%; height: 100%配合使用 —— 意味着你已经有一个固定尺寸容器，此时aspect-ratio或padding-bottom才是控制该容器比例的关键 - 别误以为加了
object-fit就不用aspect-ratio—— 前者管内容渲染，后者管容器布局，二者作用层级不同
最易被忽略的一点：无论用哪种方案，img 标签里的 width 和 height HTML 属性已被现代浏览器忽略，仅影响初始渲染，不要依赖它们来控制比例。真正起效的是 CSS 中对容器或图片本身的宽高比约束逻辑。
