直接结论：用 background-size: cover 或 contain 配合固定宽高比容器是唯一可靠纯 CSS 方案；100% 100% 是强制拉伸变形，非等比缩放——因它无视原图比例，仅按容器宽高拉伸；真正按比例缩放必须依赖 cover/contain 保持原始宽高比，且容器需通过 aspect-ratio 或 padding-bottom 锁定比例。
直接结论：用 background-size: cover 或 background-size: contain 配合固定宽高比容器，是唯一可靠、无需 JS 的纯 CSS 方案；background-size 设百分比或具体长度值，无法真正“按比例缩放”，反而容易失真。
为什么 background-size: 100% 100% 不是等比例缩放
很多人误以为 background-size: 100% 100% 是让图片“按自身比例缩放到填满容器”，其实它只是把背景图拉伸到**刚好铺满容器宽高**，完全无视原图宽高比。一张 4:3 的图在 16:9 容器里会被横向压扁或纵向拉长——这不是缩放，是强制变形。
常见错误现象：background-size: 50%（单值）会等效为 50% 50%，同样拉伸；background-size: auto 100% 则只固定高度、宽度自适应，但高度被硬设后，比例依然失控。
-
background-size的百分比值永远相对于**容器尺寸**，不是图片原始尺寸 - 想“保持比例”，必须用
cover（裁剪优先）或contain（留白优先），二者都强制维持原图宽高比 - 旧版 Safari（iOS 14.5 之前）对
background-size: cover+repeat组合支持不稳定，慎用重复背景
如何创建一个真正按比例的背景图容器
关键不在背景图本身，而在容器——必须先让容器自己具备固定宽高比，否则 cover 或 contain 也无从“按比例”可言。
立即学习“前端免费学习笔记（深入）”；
最稳妥的写法是用 padding-bottom 技巧：
.aspect-16x9 {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 9 / 16 * 100% */
overflow: hidden;
background-image: url('photo.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}- 容器高度为
0，靠padding-bottom撑开，而该值按父容器宽度计算，天然锁定比例 - 16:9 →
padding-bottom: 56.25%；4:3 →75%；1:1 →100% - 不要用
height: 0; padding-top，部分安卓 WebView 渲染异常 - 必须加
overflow: hidden，否则background-size: cover裁剪部分可能溢出
object-fit vs background-size：什么时候该用哪个
object-fit 只作用于 <img> 元素，background-size 只作用于背景图——这是根本分界线，不能混用。
选 background-size 的典型场景：
- 需要模糊/渐变叠加层（
background-image可叠多层，<img>不行） - 图是装饰性底纹，且需随容器缩放保持密度稳定（这时要用
em单位，而非百分比） - SEO 或可访问性不敏感，比如轮播封面、卡片占位图
选 object-fit 的典型场景：
- 图是内容主体（如用户头像、商品主图），需被屏幕阅读器读取、支持右键保存
- 要响应
srcset和picture元素做 DPR 适配 - 需要
loading="lazy"原生懒加载
注意：object-fit: cover 在容器 width/height 固定时才生效；若只设 width: 100% + height: auto，object-fit 无效。
现代方案：aspect-ratio + background-size 更简洁
如果只需支持 Chrome 88+、Firefox 89+、Safari 15.4+（即基本覆盖 2022 年后主流设备），直接用 aspect-ratio：
.modern-card {
width: 100%;
aspect-ratio: 16 / 9;
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
}优势明显：
- 代码更直白，语义清晰，无需 hack 式
padding-bottom - 支持动态修改（比如 JS 改
style.aspectRatio = '4 / 3'），padding-bottom方案做不到 - 与
resize、grid、flex容器天然兼容
坑点：
- IE 和旧版 Android WebView 完全不支持，降级必须 fallback 到
padding-bottom方案 -
aspect-ratio仅控制容器比例，background-size仍需显式设置，否则默认是auto（不缩放） - 某些 CMS 输出的 inline style 会覆盖
aspect-ratio，检查最终 computed style 确认是否生效
真正难的不是写哪一行 CSS，而是判断这张图到底属于“内容”还是“装饰”——前者必须用 <img> + object-fit，后者才能放心用 background-image + cover。很多视觉 bug 的根源，其实是从一开始就没分清这个边界。
