设置背景图片大小的方法

发布时间：2024-07-02 10:01

背景图片大小设置

取值	场景
数字+px	简单方便，常用
百分比	相当于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

1.设置一个盒子赋予宽（400px）高（300px），并设置边框便于观察，将原图插入盒子中
$\"在这里插入图片描述\"$
2.第一种取值（数字+px）：
- 使用数字＋px 给图片设置和盒子一样的宽高
- background-size: 400px 300px;
  $\"在这里插入图片描述\"$
3.第二种取值（百分比）：
- 使用百分比给图片设置宽高都为90%
- background-size: 90% 90%;
  $\"在这里插入图片描述\"$
4.第三种取值（contain）：
- 使用 contain 将背景图片等比例缩放，直到不会超出盒子的最大
- background-size: contain;
  $\"在这里插入图片描述\"$
5.第四种取值（cover）：
- 使用 cover 将背景图片等比例缩放，直到刚好填满整个盒子没有空白
- background-size: cover;
  $\"在这里插入图片描述\"$