设置背景图片大小的方法
发布时间：2024-07-02 10:01
背景图片大小设置
- 语法：background-size:宽度 高度；
- 作用：设置背景图片大小
- 取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单方便，常用 |
| 百分比 | 相当于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
-
1.设置一个盒子赋予宽（400px）高（300px），并设置边框便于观察，将原图插入盒子中
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/13225d90dfa149f7a13967a87d529329.png#pic_center\")
-
2.第一种取值（数字+px）：
- 使用数字＋px 给图片设置和盒子一样的宽高
- background-size: 400px 300px;
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/639bdd06260b41bb9aa8d127110ce462.png#pic_center\")
-
3.第二种取值（百分比）：
- 使用百分比给图片设置宽高都为90%
- background-size: 90% 90%;
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/8edcd4d96db74031a38a8514513eedf7.png#pic_center\")
-
4.第三种取值（contain）：
- 使用 contain 将背景图片等比例缩放，直到不会超出盒子的最大
- background-size: contain;
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/927d4f6dc7ec4c359e3e048765a3fb04.png#pic_center\")
-
5.第四种取值（cover）：
- 使用 cover 将背景图片等比例缩放，直到刚好填满整个盒子没有空白
- background-size: cover;
![\"在这里插入图片描述\"](\"https://img-blog.csdnimg.cn/192011f7fd5b4fecacaa924d8c297d20.png#pic_center\")
相关推荐
云原生、Intel Arch及云原生机密计算 3 大 SIG 在线分享！今天见 | 第 32-34 期
编译错误Variable-sized object may not be initialized 出现的原因及解决措施
Pycharm中SQL语句提示SQL Dialect is Not Configured的解决
用python画动态图_数据可视化｜绘制酷炫的GIF动态图（五）
The Illustrated BERT, ELMo, and co中文翻译
Linux下（ubuntu版本14045）安装编译bluez5.19
【论文笔记_计算机视觉_2022】Online Convolutional Re-parameterization
redis（2）-redis数据缓存、mysql和redis数据同步、varnish缓存及负载均衡及健康检查