直接用aspect-ratio最省事，但需确保chrome 88+、firefox 89+、safari 15.4+支持，旧版safari及微信x5内核不支持；必须搭配width:100%和object-fit，兜底用padding-top百分比+绝对定位。
直接用 aspect-ratio 最省事，但得先看浏览器支持情况
Chrome 88+、Firefox 89+、Safari 15.4+ 原生支持 aspect-ratio，IE 和旧版 Safari（比如微信安卓版 X5 内核）完全不认。本地开发看着正常，上线后图片被拉伸或塌陷——八成是用户卡在旧 Safari 或微信内置浏览器里。
写法很简单：.img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }。注意三点：
-
aspect-ratio是容器级控制，作用对象可以是<img>自身，也可以是它的父容器（更推荐后者，尤其当图片加载失败时仍需占位） - 必须搭配
width: 100%或其他明确宽度声明，否则aspect-ratio没法算高度 -
object-fit和aspect-ratio不是一回事：前者管图怎么“摆”，后者管盒子怎么“撑”，漏掉object-fit容易留白或裁切错位
旧浏览器兜底必须用 padding-top 百分比占位
只靠 @supports 检测不够，很多微信安卓用户根本不会触发现代 CSS 规则。最稳的 fallback 是传统 padding 占位法，兼容到 IE8。
关键点：
- 父容器设
position: relative和overflow: hidden -
padding-top的值 = (高度 ÷ 宽度) × 100%，比如 4:3 →padding-top: 75%；16:9 →padding-top: 56.25% -
<img>必须绝对定位：position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别给
<img>直接设height: 100%——它会撑破 padding 区域，导致高度失控
object-fit: contain 看似能保比例，但极易失效
很多人加了 object-fit: contain 发现没用，根本原因是：它只在“已有盒模型”里生效。如果 <img> 没明确宽高（比如只写了 width: 100% 但没设 height），浏览器连容器尺寸都算不出，contain 就彻底失能。
常见陷阱：
- Flex 容器中，
align-items: stretch会强制拉高<img>，哪怕你写了height: auto - 混用
max-width: 100%和width: 100%：Safari 旧版本会触发异常重算，contain表现飘忽 - 以为
object-fit能替代aspect-ratio：它不能撑开容器，只负责内容摆放；容器本身没比例，图片再“居中”也救不了布局塌陷
别依赖 HTML 的 width 和 height 属性
HTML 中写的 <img style="max-width:90%" style="max-width:90%"> 已被现代浏览器忽略，只影响初始渲染帧，对 CSS 布局无实际约束力。尤其在响应式场景下，这些属性不仅无效，还可能干扰 JS 获取原始尺寸的逻辑。
真正可控的方式只有两种：
- 用
aspect-ratio+width控制容器比例（现代方案） - 用
padding-top+ 绝对定位模拟比例（兼容方案）
中间任何“看起来能用”的折中写法，比如只设 width: 100%; height: auto，在 flex、grid 或轮播组件里都容易因父容器高度未约束而翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
