应优先使用 aspect-ratio 实现响应式等比缩放，配合 width: 100% 和 height: auto；若需兼容旧版 Safari 等浏览器，则采用 padding-bottom 百分比方案。
图片宽高比固定但要响应式缩放
用 height: auto 本身不能保证等比缩放——它只是让浏览器按原始宽高比计算高度，前提是 width 已被明确设定（比如设为 100% 或具体值）。如果父容器宽度动态变化，而图片又没设 width，height: auto 就没意义。
- 必须显式设置
width（如width: 100%），height: auto才会起作用 - 图片原始尺寸差异大时，仅靠
width: 100%; height: auto可能导致高度突变，尤其在瀑布流或 flex 布局中 - 不要依赖图片自带的
height和width属性（HTML 属性），它们已被现代 CSS 忽略，只影响初始渲染
用 aspect-ratio 强制维持宽高比（现代方案）
aspect-ratio 是目前最直接、最可控的方式，不需要 JS 或伪元素。它让容器（包括
- 写法是
aspect-ratio: 16 / 9或aspect-ratio: 4 / 3，不带单位 - 配合
width: 100%+height: auto，就能在任意宽度下等比缩放 - 兼容性：Chrome 88+、Firefox 89+、Safari 15.4+；iOS Safari 15.4+ 起支持，旧版需降级
- 注意：IE 完全不支持，
aspect-ratio也不能和height同时设为具体值，否则会被忽略
兼容老浏览器的 padding-bottom 方案
当必须支持 iOS Safari padding-bottom 搭配绝对定位仍是稳妥选择。原理是利用 padding 百分比基于父容器宽度计算的特性模拟高度。
- 外层容器设
position: relative，内层position: absolute; top: 0; left: 0; width: 100%; height: 100% - 外层用
padding-bottom: 56.25%（对应 16:9）来“撑开”高度 - 图片本身建议加
object-fit: cover或contain，避免拉伸变形 - 缺点：语义性差，DOM 多一层包裹，且无法响应图片真实加载尺寸
img 标签里写 style="height:auto" 没用？
写了 style="height: auto" 却没效果，大概率是因为：图片没设 width，或者父容器宽度为 0（比如 flex 未设 flex-shrink: 0 或 min-width），又或者 CSS 优先级被其他规则覆盖（比如某处写了 img { height: 200px }）。
- 检查 computed styles，确认
width是否最终生效为非auto值 - 用
!important临时验证是否是优先级问题（不推荐线上用） - 移动端某些 WebView 对
height: auto解析不稳定，特别是图片异步加载后重绘时，可加display: block避免行内元素基线干扰
真正难的不是怎么写那几行 CSS，而是判断当前项目需要保多少兼容性、图片是否总能正常加载、以及父容器的布局模式是否会让 aspect-ratio 被意外截断——这些细节不查 DOM 和 computed styles，光看代码很难发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
