CSS background-size 语法
在 CSS 中，background-size 属性用于定义元素的背景图片的大小。
语法：
background-size: 数值 | 关键字;说明：
background-size 属性的取值有 2 种。
- 数值：比如像素值（px）、百分比（%）、em、rem 等。此时的 background-size 可以是 1 个数值，也可以是 2 个数值。
- 如果是 1 个数值，则表示宽度为该数值，而高度使用默认值 auto（即保持图片原有的宽高比）。则表示宽度为该数值，而高度使用默认值 auto（即保持图片原有的宽高比）。
- 如果是 2 个数值，则第 1 个数值表示宽度，第 2 个数值表示高度。
- 关键字：常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| auto（默认值） | 保持背景图片原尺寸 |
| cover | 即 “覆盖”，表示将背景图片等比缩放来填满整个元素 |
| contain | 即 “容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止 |
注意: img 图片是可以使用 width 和 height 来定义大小，但背景图片并非元素，它无法使用 width 和 height 定义大小，而应该使用 background-size 来定义大小。
CSS background-size 摘要
| 属于 | CSS 背景大小 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS background-size 示例
下面有一张 200px * 200px 的图片，我们通过设置不同的 background-size 属性取值，来看看实际效果如何。
示例 1：background-size 取值为 “数值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 400px;
height: 300px;
background-color: lightskyblue;
margin-bottom: 10px;
background-image: url("imgs/bird.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
如果给 div 加上下面代码，此时效果如下图所示。
background-size: 30%;
如果给 div 加上下面代码，此时效果如下图所示。
background-size: 200px 300px;
示例 2：background-size 取值为 “关键字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 400px;
height: 300px;
background-color: lightskyblue;
margin-bottom: 10px;
background-image: url("imgs/bird.jpg");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
如果给 div 加上下面代码，此时效果如下图所示。
background-size: contain;
比如加上 background-size: contain; 之后，再把 background-repeat: no-repeat; 删除，此时页面效果如下图所示。
