background-size: cover 不会导致图片变形，而是等比缩放后裁剪边缘；当容器与图片宽高比不一致时，关键内容（如人脸）被切掉，常见于全屏 banner。
background-size: cover 为什么图片会变形？
用 background-size: cover 确实能让背景图铺满整个容器，但它的逻辑是“等比缩放后完全覆盖容器”，所以当图片宽高比和容器不一致时，必然裁切——不是变形，而是被截掉边缘。常见于全屏 banner 在不同分辨率设备上只显示人脸一半。
- 解决思路：优先确保图片本身宽高比接近 16:9 或 4:3，再配合
background-position控制关键内容居中（比如background-position: center center） - 如果必须保留全部内容且铺满，改用
background-size: 100% 100%，但此时失去等比，图片拉伸失真 - 注意：移动端 viewport 缩放、iOS Safari 的地址栏隐藏/显示会动态改变视口高度，
height: 100vh可能不准，建议搭配 JS 动态设高或用min-height: 100vh
如何让背景图真正“全屏”且响应式不崩？
所谓“全屏”，通常指覆盖整个视口（viewport），但 CSS 里没有直接叫 “fullscreen background” 的属性，得靠组合控制。
- 容器必须撑满视口：
html, body { height: 100%; margin: 0; }+ 目标元素min-height: 100vh; - 背景图设置三件套缺一不可：
background-image、background-size: cover、background-attachment: fixed（可选，实现视差效果） - 为兼容老浏览器（如 IE9+），补上
background-size: 100% 100%前置声明，现代浏览器会覆盖它 - 示例片段：
section.hero { min-height: 100vh; background-image: url("hero.jpg"); background-size: 100% 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; }
background-size: contain 和 cover 的实际取舍场景
contain 是“等比缩放后完整可见”，适合展示 logo、图标、产品图等不能裁切的内容；cover 是“等比缩放后完全覆盖”，适合氛围型背景图。二者在全屏背景下几乎不会单独使用 contain，因为会导致大片留白。
- 若想保留图片全部内容又不想留白，只能接受拉伸：
background-size: 100vw 100vh（注意单位是 vw/vh，不是 %） -
background-size: auto 100%表示高度强制 100%，宽度按比例推算——适合竖构图图片横铺全屏 - 性能提示：大图用
cover时，浏览器仍需解码整张图，建议用image-set()或srcset配合 media query 提供多分辨率版本
移动端 Safari 中 background-attachment: fixed 失效怎么办？
iOS Safari 从 iOS 15 开始对 background-attachment: fixed 加了限制：仅当元素有 transform: translateZ(0) 或 will-change: transform 时才生效，否则退化为 scroll。
- 简单修复：
background-attachment: fixed; transform: translateZ(0); - 但注意：加了
transform后，该元素会成为新的 stacking context，可能影响 z-index 层级，调试时留意遮挡问题 - 更稳妥的替代方案：放弃 fixed，改用 JS 监听 scroll 模拟视差，或直接用
background-attachment: scroll+ 更强的视觉层次设计
load 事件，无法精确知道何时铺满完成。需要视觉反馈时，得靠 img 元素 + object-fit 或懒加载库兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
