最直接的方法是使用 aspect-ratio 属性，配合 width: 100% 和 object-fit 实现响应式宽高比控制，但需注意 Safari 15.4+、Chrome 88+、Firefox 89+ 才支持；兼容性要求高时可用 padding-top 百分比方案，通过父容器 relative + 子元素 absolute 实现伪宽高比。
用 aspect-ratio 最直接，但得看浏览器支持情况
现代 CSS 提供了 aspect-ratio 属性，能直接声明宽高比，图片容器（比如 <div> 或 <img> 自身）设上它，配合 width: 100% 就能自动维持比例，高度由浏览器计算得出。
常见写法：
img {
width: 100%;
aspect-ratio: 4 / 3; /* 或 16 / 9、1 / 1 等 */
object-fit: cover; /* 防止拉伸变形，按需选 fill/contain/cover */
}注意：aspect-ratio 是作用在元素自身上的，不是父容器；如果图片是响应式背景图，就得换思路（见下一条）。另外，aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 支持良好，老版本 iOS Safari 或 IE 完全不支持。
用 padding-top 百分比实现“伪宽高比”容器（兼容性最强）
这是传统但可靠的做法：利用子元素 position: absolute 脱离文档流，再靠父容器的 padding-top 百分比（基于宽度计算）撑出固定比例空间。适合需要兼容 IE11 或旧版移动端的场景。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
padding-top的百分比值 = (高度 ÷ 宽度) × 100%，例如 4:3 →padding-top: 75% - 图片必须用
<img>标签且放在绝对定位的子容器里，不能直接设height: 0+padding-top在<img>上（<img>是替换元素，padding 不触发宽高比逻辑） - 父容器要设
position: relative，否则absolute会相对更外层定位
.ratio-box {
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 */
}
.ratio-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit 和 object-position 决定图片怎么“塞”进框里
即使容器比例正确，图片内容仍可能被裁剪或留白——这取决于 object-fit 值。它和 background-size 类似，但专用于替换元素（如 <img>、<video>）。
常用组合：
-
object-fit: cover：等比缩放填满容器，溢出部分裁剪（最常用，类似background-size: cover） -
object-fit: contain：等比缩放至全部可见，可能留白 -
object-fit: fill：强行拉伸铺满，会变形 - 加
object-position: center top可微调焦点位置，比如确保人脸不被裁掉
用 max-width 替代 width: 100% 防止图片超原尺寸
如果原始图片很小（比如 300px 宽），而容器在大屏下拉到 1200px，仅设 width: 100% 会导致图片严重模糊。应该优先用 max-width: 100%，让图片在不超过自身分辨率的前提下弹性缩放。
完整推荐写法（兼顾比例、清晰度、兼容性）：
img {
display: block;
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}注意：height: auto 在有 aspect-ratio 时其实非必需，但加上更稳妥；display: block 是为了消除行内元素默认的底部空白。
真正容易被忽略的是：当图片作为内容嵌入（非背景）时，不要只依赖父容器 padding 技巧却忘了给 <img> 设 height: 100% —— 如果父容器用的是 padding-top 方案，而图片没设绝对定位或高度，它根本不会显示出来。
