object-fit 是控制图片缩放行为最直接有效的方案，支持 contain（完整显示）和 cover（填满裁剪）等值，需配合明确容器尺寸；现代推荐 aspect-ratio + object-fit 组合，兼顾语义与维护性；纯 HTML 可仅设 width 或 height 之一保持比例；兼容旧浏览器可用 padding-top 技巧。
用 object-fit 控制图片缩放行为
HTML5 本身不提供“自动保持宽高比”的属性，但现代浏览器支持的 object-fit 是最直接有效的方案。它作用于
-
object-fit: contain：完整显示图片，留白；适合头像、图标等需看清全貌的场景 -
object-fit: cover：填满容器，可能裁剪；适合封面图、轮播图等强调视觉冲击的场景 - 必须配合明确的容器尺寸（如
width和height），否则无效 - IE 不支持，若需兼容 IE，得回退到其他方案
@@##@@
用 aspect-ratio 固定容器比例（CSS 新特性）
aspect-ratio 不操作图片本身，而是让图片的父容器维持固定宽高比，再结合 object-fit 或自然流式布局，就能稳定呈现不失真图片。这是目前语义最清晰、维护性最强的做法。
- 支持值如
aspect-ratio: 16 / 9、aspect-ratio: 1 / 1 - 搭配
width: 100%和height: auto，图片会随容器等比缩放 - 注意：Safari 15.4+、Chrome 88+、Firefox 89+ 支持；旧版 Safari 需用
padding-top技巧模拟 - 不要对
aspect-ratio，它只对块级容器生效
@@##@@
不用 CSS 的纯 HTML 方案：只设 width 或 height 之一
如果完全不想依赖 CSS，仅靠 HTML 属性也能保持比例——前提是原始图片尺寸已知，且你愿意放弃响应式弹性。
- 只写
width="400"，不写height：浏览器会按原始宽高比自动计算高度 - 只写
height="300"，不写width：同理，宽度自动推算 - 同时写死
width和height会导致拉伸变形，务必避免 - 此法在响应式页面中容易失效（比如容器变窄时图片溢出），仅适合静态、固定尺寸场景
@@##@@
兼容老浏览器的 padding-top 响应式技巧
当目标环境包括旧版 Safari 或需要深度兼容时，padding-top 百分比方案仍是可靠选择。它的核心是利用「块级元素的 padding-top 百分比基于宽度计算」这一特性来撑开容器高度。
立即学习“前端免费学习笔记（深入）”；
- 外层 设
position: relative和width: 100%- 内层伪占位
设padding-top: 56.25%（对应 16:9）并position: absolute- 图片用
position: absolute覆盖其上，width: 100%; height: 100%- 这个技巧绕过了对
aspect-ratio的依赖，但结构略重，维护成本略高
实际项目中，优先用@@##@@aspect-ratio+object-fit组合；若需保底兼容，再叠加padding-top方案。最容易被忽略的是：容器必须有明确宽度来源（比如父级设了max-width或flex分配），否则所有比例控制都会失效。
- 内层伪占位
