背景图片尺寸html（background-size 之背景图的尺寸设置）

时间2025-06-20 16:38:03分类IT科技浏览4639

导读：目录...

一：background-size参数取值

1.0

1.1

二：实例分析

2.1 参数分析

2.2 代码实例分析

引：background-size: 没有设置任何尺寸时使用图片本身的大小，宽度和高度都是auto默认值

可以用px设置成具体的值，也可以使用百分比

一：background-size参数取值

1.0

1个值同时设置宽高

2个值分别设置宽高

1.1

1 以px为单位的数字

2 %

3 cover 让背景图片充满这个容器,哪怕图片显示不全也没关系,不在乎

4 contain 让图片完全在容器中显示(等比例缩小)哪怕容器有空白，也没关系

1.2 作用范围

这些属性能够写在一个简单的属性中：background 。必须指出background负责元素内容部分的背景，包括padding和border ，但不包括margin 。

二：实例分析

各种不同比例的适配问题，完美适配很少发生

2.1 参数分析

background-size: 100% 50%; 宽度占满屏幕，高度占50%

background-size: 100% 100%; 宽度高度都占满整个屏幕，除非图片完美适配，否则图片会变形

background-size: 100% auto; 宽度占满屏幕，高度自动适配，高度有所牺牲

background-size: auto 100%; 高度占满屏幕，宽度自动适配，宽度有所牺牲

至于是要牺牲宽度还是高度，具体问题具体分析，比如学子的沙发可以裁掉，有的背景图不能裁

background-size: cover；铺满整个容器，多余的部分会被裁掉

background-size: contain；至少有一张完整的图呈现出来，一定会有多余的空间

2.2 代码实例分析

背景图1和背景图2 you红色边框分隔开来

背景图1

背景图2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片的尺寸</title> <style type="text/css"> * { margin: 0; padding: 0; } /* 版心尽量清爽一点，就设置宽度与居中 */ .center { width: 900px; margin: 0 auto; } /* 背景图1的相关设置 */ .pic { /* 宽度使用父级的 */ height: 500px; border: 5px solid red; /* 加入背景图 */ background-image: url(img/bg.png); /* 尺寸设置 */ background-size: 600px 300px; /* 可以使用百分比，但是宽高都是100%的情况，防止图片变形 */ background-size: 100% 100%; /* 宽度100% ，高度自动适配，会牺牲一部分高度 */ background-size: 100% auto; /* 宽度自动适配，高度100% ，会牺牲一部分宽度 */ background-size: auto 100%; /* 铺满整个屏幕，多余的部分会被裁掉 */ background-size:cover; /* 至少有一张完整的图呈现出来，一定会有多余的空间 */ background-size:contain; } .shucai { height: 300px; background-image: url(img/carousel-1.jpg); background-size: auto 100%; /* 与contain是有区别的，注意观察两种值不同的效果 */ background-size: 100% auto; /* 至少有一张完整的图片展现出来 */ background-size: contain; /* 铺满整个容器，多余的部分会被裁掉 */ /* background-size: cover; */ } </style> </head> <body> <div class="bg1"> <div class="center">  <div class="pic"></div> </div> </div> <div class="bg2"> <div class="center">  <div class="shucai"></div> </div> </div> </body> </html>

背景图片尺寸html（background-size 之 背景图的尺寸设置）

一：background-size参数取值

1.0

1.1

1.2 作用范围

二：实例分析

2.1 参数分析

2.2 代码实例分析

背景图片尺寸html（background-size 之背景图的尺寸设置）