background-size做自适应的背景图

Posted 2020-06-14

background-size做自适应的背景图

在我们做页面布局的时候往往会遇到这样的情况当我固定一个元素的尺寸，在像元素加入背景的时候发现背景图片的原始尺寸很大，当我把背景图写入时往往超过元素很大一部分我们只能看见一部分的背景图在元素内显示！

如图所示这是我的背景图

 

我有一个div要加入这张背景图结果发现显示的结果和设计需要的效果完全不一样。

div{

                            width: 400px;

                            height: 200px;

                            border: 1px solid red;

                            background: url(2.jpg) 0 0 no-repeat;

                   }

<div></div>

 

出现这样的情况原因？

首先我们需要找出问题所在从上面两张图就能看出原图的尺寸要大出元素设置的宽高；

找到问题所在如何进行处理那？

CSS3 提供给我background-size这个属性让我能更好的对背景图进行自适应处理。

background-size为我们提供了4个参数

length/percentage/cover/contain

length: 设置背景图像的高度和宽度, 第一个值设置宽度，第二个值设置高度, 如果只设置一个值，则第二个值会被设置为 "auto"。

percentage: 以父元素的百分比来设置背景图像的宽度和高度。值得设置与length相同。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

对上述4个参数做了如下验证：

<style>
div{width: 400px;height: 200px;border: 1px solid red;background: url(2.jpg) 0 0 no-repeat;}
.length{background-size: 400px 200px;}
.length2{background-size: 400px ;}
.percentage{background-size: 100% 100%;}
.percentage2{background-size: 100% ;}
.cover{background-size: cover;}
.cover2{width: 1000px;height:200px;border: 1px solid red;background: url(2.jpg) 0 0 no-repeat;background-size: cover;}
.contain{background-size: contain;}
.contain2{height: 80px;background-size: contain;}
</style>

<h3>像素级的缩放设置</h3>
<div class="length"></div>
<h3>像素级的缩放只设置一个参数时候第二个参数为auto</h3>
<div class="length2"></div>
<h3>百分比的缩放设置</h3>
<div class="percentage"></div>
<h3>百分比的缩放当只设置一个参数时第二个参数为auto</h3>
<div class="percentage2"></div>
<h3>cover</h3>
<div class="cover"></div>
<p>突然发现背景图怎么没显示完全。<br>
cover是按比例去设置背景图片的，它会把图片设置到最大程度进行<br>
适配如本图它的高度已经到了极限所以它就不会再去做宽度的适应，<br>就像上面关于cover介绍的后半部分：背景图像的某些部分也许无法显示在背景定位区域中。
</p>
<h3>为了更好的理解我们做一个宽度达到极限的例子</h3>
<div class="cover2"></div>
<p>按比例适应时发现宽度可以放大到最大程度，高度因为比例的变化会有一部分被隐藏掉了</p>
<h3>contain</h3>
<div class="contain"></div>
<p>最大程度去适应背景,同样做一个相反的例子进行比较如下图</p>
<div class="contain2"></div>

最终实现的结果

像素级的缩放设置

 

像素级的缩放只设置一个参数时候第二个参数为auto

 

百分比的缩放设置

 

百分比的缩放当只设置一个参数时第二个参数为auto

 

Cover

 

突然发现背景图怎么没显示完全。
cover是按比例去设置背景图片的，它会把图片设置到最大程度进行
适配如本图它的高度已经到了极限，所以它就不会再去做宽度的适应，
就像上面关于cover介绍的后半部分：背景图像的某些部分也许无法显示在背景定位区域中。

为了更好的理解我们做一个宽度达到极限的例子

 

按比例适应时发现宽度可以放大到最大程度，高度因为比例的变化会有一部分被隐藏掉了

Contain

 

最大程度去适应背景,同样做一个相反的例子进行比较如下图