background-size: cover 无法直接过渡，因其为关键字而非可计算值；需用js计算等效数值（如scale×100%）并配合css transition实现平滑缩放动画。
background-size: cover 为什么不能直接过渡
直接写 background-size: cover 切换到 background-size: contain 或具体数值时，浏览器无法插值——因为 cover 和 contain 是关键字，不是可计算的长度值，CSS 过渡会立即跳变，看不到缩放动画。
- 必须用具体数值（如
100%、200%、auto 100vh）才能触发平滑过渡 -
cover的实际缩放比例是动态计算的，取决于容器宽高比和图片原始尺寸，没法直接拿来过渡 - 常见错误：给
background-size: cover加transition: background-size 0.5s—— 无效，控制台无报错但动画不生效
如何用具体数值模拟 cover 行为并支持过渡
核心思路：用 JS 获取图片原始尺寸和容器尺寸，算出等效的 background-size 值，再设为 CSS 变量或内联样式，配合 transition 动画。
- 假设图片原始宽高为
imgWidth、imgHeight，容器宽高为containerWidth、containerHeight - cover 等效逻辑：缩放倍率 =
Math.max(containerWidth / imgWidth, containerHeight / imgHeight) - 对应
background-size值就是${scale * 100}%（以宽度为基准）或auto ${scale * imgHeight}px（更稳，避免宽高比失真） - CSS 中写：
transition: background-size 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)，贝塞尔曲线比默认线性更自然
示例片段：
element.style.setProperty('--bg-scale', `${scale * 100}%`);
CSS 中：background-size: var(--bg-scale) auto;
全屏切换时必须处理的三个尺寸陷阱
全屏背景（height: 100vh）下，background-size 过渡容易因尺寸抖动失效或错位。
-
100vh在移动端 Safari 中可能包含地址栏高度，导致容器高度突变，过渡中断 —— 改用min-height: 100vh+height: 100%并确保父级有高度约束 - 图片加载完成前就执行缩放计算，
img.naturalWidth为 0 —— 必须监听img.onload或用image.decode()确保尺寸可用 - 窗口 resize 后未重新计算缩放值，导致背景拉伸变形 —— 需节流监听
resize，并重新 set CSS 变量
纯 CSS 方案的适用边界与妥协点
如果不想写 JS，只能用纯 CSS，就得放弃「动态 cover 模拟」，改用固定缩放策略。
- 适合场景：背景图尺寸固定、容器尺寸也基本固定（如桌面端全屏 Banner）
- 可行做法：用
background-size: 120% 120%→100% 100%过渡，配合background-position: center保持居中 - 缺点：无法真正响应式适配不同屏幕宽高比，小屏可能裁切过多，大屏可能留白
- 关键参数：起始值建议不低于
110%，否则缩放感太弱；过渡时间控制在0.4s–0.7s，太短像闪，太长显拖沓
真正可靠的全屏缩放切换，绕不开 JS 计算。CSS 只负责承接和动画，别指望它自己猜出 cover 的像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
