使用 background-size 的 cover 和 contain 可解决背景图变形问题：cover 使图片覆盖容器但可能裁剪，contain 确保图片完整显示但留白，根据是否允许裁剪选择对应值，并配合 background-position: center 实现居中，提升页面视觉效果。
在网页开发中，插入背景图后出现拉伸变形的问题很常见。这通常是因为图片尺寸与容器不匹配，而没有正确设置背景图的缩放方式。通过CSS的 background-size 属性，可以轻松控制背景图的显示效果，其中 cover 和 contain 是最常用的两个值，它们能有效避免变形。
background-size: cover — 完全覆盖容器
使用 cover 时，背景图会等比例缩放，确保完全覆盖整个容器区域。如果容器宽高比与图片不一致，图片可能会被裁剪，但不会变形。
适用场景：- 希望背景图填满整个区域，比如全屏banner或页面头部
- 图片内容中心重要，边缘可裁剪
CSS 示例：
.hero {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 500px;
}
background-size: contain — 完整显示图片
使用 contain 时，背景图会等比例缩放，确保整张图片都显示在容器内。图片不会被裁剪，但容器可能出现空白区域。
立即学习“前端免费学习笔记（深入）”；
适用场景：
- 需要完整展示图片内容，如图标、插画
- 不能接受任何裁剪的情况
CSS 示例：
.logo-container {
background-image: url('logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 300px;
height: 200px;
}
如何选择 cover 还是 contain？
关键看设计需求：
- 要填满背景且允许裁边 → 用 cover
- 要完整显示图片且接受留白 → 用 contain
配合 background-position: center 可让图片居中显示，视觉更协调。
基本上就这些。合理使用 cover 和 contain，能有效解决背景图拉伸变形问题，让页面视觉更专业。
