aspect-ratio 是现代 css 控制图片比例最干净的方案，但不兼容 ie 和旧版 safari。
用 aspect-ratio 直接控制图片比例，但别指望它在所有浏览器都生效
现代 CSS 的 aspect-ratio 是最干净的解法，但它不兼容 IE 和旧版 Safari（
它作用在图片自身（或其容器），让元素“主动维持比例”，而不是靠父容器挤压。关键点是：它只管宽高比，不管尺寸来源——所以必须配合 width 或 height 使用，否则可能塌陷。
-
img { aspect-ratio: 4 / 3; width: 100%; height: auto; }—— 宽度自适应，高度按比例算 -
img { aspect-ratio: 1 / 1; height: 200px; width: auto; }—— 高度固定，宽度按比例推导 - 别写
aspect-ratio: 4/3（缺空格），CSS 解析会失败；必须是4 / 3或1.333
img 标签加 width 和 height 属性，能触发浏览器原生长宽比保护
HTML 中给 img 写上 width 和 height 属性（不是 CSS），浏览器会在加载完成前预留正确比例的占位框，避免布局抖动，同时天然抑制拉伸——前提是没用 CSS 强行覆盖 width/height。
- 写成
<img src="a.jpg" style="max-width:90%" style="max-width:90%">，比只写 CSS 更可靠 - 如果用 CSS 设置了
width: 100%，记得同时加height: auto，否则旧版 Chrome 可能忽略 HTML 属性 - 服务端生成的图片，建议把原始尺寸注入到 HTML 属性里，而不是靠 JS 算
遇到 object-fit: cover 拉伸失效？检查父容器是否限制了尺寸来源
object-fit: cover 本身不改变图片原始尺寸，只是裁剪显示区域。如果图片还是被压扁，大概率是父容器没有明确宽高，导致 cover 失去参照系。
- 父容器必须有可计算的宽高（比如
width: 300px; height: 200px，或aspect-ratio+width） - 别在
img上同时设width/heightCSS 和object-fit，容易冲突；优先用object-fit+ 容器约束 -
object-fit: contain适合需要完整显示的场景，但会留白；cover适合海报类，但必须接受裁剪
Safari 15.2 及更早版本不支持 aspect-ratio，用 padding-bottom 技巧兜底
这是最成熟的兼容方案：利用 padding-bottom 百分比基于父容器宽度的特性，制造一个“伪高度”。它要求图片用 position: absolute 贴满容器，且容器设为 position: relative。
- 4:3 比例写法：
.wrapper { position: relative; width: 100%; padding-bottom: 75%; } .wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } - 百分比值 = (高度 ÷ 宽度) × 100%，比如 16:9 →
56.25% - 注意：这个技巧下，图片内容不可选、不可聚焦，对可访问性有影响；如需语义化，得额外加
aria-hidden="true"并确保文字替代足够
真正麻烦的是混合场景：比如图片来自 CMS，尺寸未知，又得兼顾老 Safari 和新 Chrome。这时候得用 JS 读取 naturalWidth/naturalHeight 做 fallback，或者直接放弃精确比例，用 min-width/min-height 加媒体查询卡死范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
