直接用 width: 100% + height: auto 可实现手机端等比缩放，但需父容器宽度明确且 css 优先级未被覆盖；height: auto 生效前提是有明确 width，且需规避 flex 压缩、全局重置干扰；现代首选 aspect-ratio，兼容 chrome 88+、firefox 89+、safari 15.4+，旧版 ios safari 可用 padding-bottom 百分比方案。
直接用 width: 100% + height: auto 就能实现手机端等比例缩放，但前提是父容器宽度明确、CSS 优先级没被覆盖——90% 的“不生效”问题都出在这两点。
为什么 height: auto 有时没反应
不是它失效，而是缺少触发条件：
-
img元素必须有明确的width（比如width: 100%或具体值），height: auto才会按原始宽高比计算高度 - 父容器不能是
display: flex且没设flex-shrink: 0或min-width，否则可能被压缩到宽度为 0 - 检查 computed styles，确认最终生效的
width不是auto；常见干扰来自全局重置样式（如img { max-width: 100% }被覆盖）或框架默认规则
aspect-ratio 是现代首选方案
它主动维持比例，不依赖图片是否加载完成，也不吃父容器宽度是否“稳定”：
- 写法简单：
img { width: 100%; height: auto; aspect-ratio: 16 / 9; } - 兼容性：Chrome 88+、Firefox 89+、Safari 15.4+（iOS Safari 15.4+ 起支持），旧版 iOS Safari 需降级
- 注意：
aspect-ratio和显式height（如height: 200px）同时存在时，后者会被忽略 - 对 SVG 或空
img同样有效，语义清晰，无需额外 wrapper
兼容 iOS Safari 15.3 及更早版本
用 padding-bottom 百分比方案，原理是 padding 值基于父容器宽度计算：
- 外层容器设
position: relative和padding-bottom: 56.25%（对应 16:9） -
img设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 务必加
object-fit: cover或contain，否则图片会拉伸变形 - 缺点：DOM 多一层包裹，无法响应图片真实尺寸（比如加载后宽高变化）
真正容易被忽略的是：别信 HTML 的 width 和 height 属性，它们在现代 CSS 中只影响初始渲染，且会被 width/height 样式覆盖。所有可控逻辑必须落在 CSS 规则里，而不是靠属性“猜”浏览器行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
