理解CSS3中的background－size(对响应性图片等比例缩放)

 

2016-03-10 01:40 by 空智, 7463 阅读, 8 评论, 收藏, 编辑

理解CSS3中的background－size(对响应性图片等比例缩放)

阅读目录

• background-size的基本属性
• 给图片设置固定的宽度和高度的
• 固定宽度400px和高度200px－使用background－size:400px 200px缩放设置
• 固定宽度400px和高度200px－使用background-size:400px;的缩放设置，那么第二个参数会自动转换为auto
• 固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置
• 固定宽度400px和高度200px－使用background-size:100%的缩放设置
• 使用属性cover来设置背景图片
• 使用属性contain来设置背景图片
• 给图片设置width属性100%；高度自适应
• 使用另外一种方式来解决图片自适应的问题－－图片自适应问题
• 使用padding-top:(percentage)实现响应式背景图片

回到顶部

background-size的基本属性

     background-size: 能够设定背景图像的尺寸，该属性是css3中的，在移动端使用的地方不少，好比最多见的地方在作响应性布局的时候，好比以前作的项目中有轮播图片，为了自适应不一样大小分辨率的图片，我门须要使用css3中的媒体查询来针对不一样的分辨率设置宽度和高度，虽然这种方式是能够解决问题，可是解决方式并非太好，而且很繁琐，固然我门也想过直接使用百分比设置图片的大小，好比width(宽度): 100%，height(高度)：100%; 可是设置图片等高度100%的时候并不生效，图片没有显示出来，由于没有设置具体的高度值，浏览器渲染的时候并无高度，所以当时解决的方法是使用css3中的媒体查询真对不一样的分辨率等比例缩放不一样的height(高度)；今天我门从新来学习下background-size 这个具体的属性值，而且使用新的方法来解决针对响应性布局的背景图片自适应。

浏览器支持的程度：IE9+, Firefox4+, opera, chrome, safari5+;

基本语法：background-size: length | percentage | cover | contain; 

一：length

    该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。若是只设置第一个值，那么第二个值会自动转换为 “auto”;

二：percentage

     该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。若是只设置一个值，那么第二个值会被设置为 “auto”;

三：cover

      把背景图像扩展至足够大，以使背景图像彻底覆盖背景区域。

四：contain

      把图像扩展至最大尺寸，以使宽度和高度 彻底适应内容区域。 

回到顶部

给图片设置固定的宽度和高度的

下面我门来作一些demo来实现下上面的几个属性值的基本使用方法；

基本的原图的html代码以下：

<h3>原图</h3> <div class="images"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

效果以下图所示：

 

给图片设置固定的宽度和高度的代码以下：

好比设置 固定宽度400px和高度200px后的图片；

HTML代码以下：

<h3>固定宽度400px和高度200px后的图片</h3> <div class="bsize1"></div>

css代码以下：

.bsize1 { width:400px; height:200px; background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; border:1px solid red; overflow: hidden; }

效果以下：

回到顶部

固定宽度400px和高度200px－使用background－size:400px 200px缩放设置

2. 固定宽度400px和高度200px－使用background－size:400px 200px缩放设置；

HTML代码以下：

<h3>固定宽度400px和高度200px－使用background－size:400px 200px缩放设置</h3> <div class="bsize1 bsize2"></div>

css代码以下：

.bsize2 { background-size: 400px 200px; }

效果以下：

回到顶部

固定宽度400px和高度200px－使用background-size:400px;的缩放设置

 3. 固定宽度400px和高度200px－使用background-size:400px;的缩放设置，那么第二个参数会自动转换为auto；

HTML代码以下：

<h3>固定宽度400px和高度200px－使用background-size:400px;的缩放设置</h3> <div class="bsize1 bsize3"></div>

css代码以下：

.bsize3 { background-size: 400px; }

效果以下：

回到顶部

固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置

4. 固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置

HTML代码以下：

<h3>固定宽度400px和高度200px－使用background-size:100% 100%的缩放设置</h3> <div class="bsize1 bsize4"></div>

css代码以下：

.bsize4 { background-size:100% 100%; }

效果以下：

回到顶部

固定宽度400px和高度200px－使用background-size:100%的缩放设置

5. 固定宽度400px和高度200px－使用background-size:100%的缩放设置。

HTML代码以下：

<h3>固定宽度400px和高度200px－使用background-size:100%的缩放设置</h3> <div class="bsize1 bsize5"></div>

css代码以下：

.bsize5 { background-size: 100%; }

以下所示：

回到顶部

使用属性cover来设置背景图片

6. 使用属性cover来设置背景图片。

HTML代码以下：

<h3>使用属性cover来设置背景图片</h3> <div class="bsize1 cover"></div>

css代码以下：

.cover { background-size:cover; }

效果以下：

回到顶部

使用属性contain来设置背景图片

7. 使用属性contain来设置背景图片。

HTML代码以下：

<h3>使用属性contain来设置背景图片</h3> <div class="bsize1 contain"></div>

css代码以下：

.contain { background-size:contain; }

效果以下：

回到顶部

给图片设置width属性100%；高度自适应

8.  下面我门使用图片来作，不使用背景图片等状况下，给图片设置属性 width ＝ 100%的话，它的高度会自适应的。以下HTML代码：

<h3>给图片设置属性宽度为100%的状况下，可自适应图片</h3> <div class="bsize-padding"><img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg" width="100%"/></div>

效果以下：

回到顶部

使用另外一种方式来解决图片自适应的问题－－图片自适应问题

9. 使用另外一种方式来解决图片自适应的问题－－图片自适应问题，图片宽度设置100%，页面加载时会存在高度塌陷的问题，可使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100；

以下HTML代码：

<h3>图片自适应问题，图片宽度设置100%，页面加载时会存在高度塌陷的问题</h3> <p>可使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p> <div class="cover-paddingTop"> <img src="http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg"/> </div>

css代码以下：

.cover-paddingTop { position: relative; padding-top: 50%; overflow: hidden; } .cover-paddingTop img{ width:100%; position: absolute; top:0; }

效果以下：

回到顶部

使用padding-top:(percentage)实现响应式背景图片

10. 使用padding-top:(percentage)实现响应式背景图片

      我门都知道，处理在响应性布局的时候，背景图片都是等比例缩放，好比上面的使用图片的状况，使用<img /> 引入的图片的话，那么设置她们的width属性为100%；<img src=”” width=”100%”/> 的话，高度就会等比例缩放，这是图片，可是若是是背景图片呢？我门以前的项目中的常见的作法是根据css3媒体查询的方法来作的，根据不一样手机的分辨率等不一样，来等比例缩放背景图的高度，虽然这种方式是能够解决问题的，可是这种经过人肉的方式来进行设置并很差，也很繁琐，今天我门来学习使用padding－top这么一个属性来设置了；

实现的基本原理：将使用到保持元素的宽高比的技巧，为元素添加垂直方向的padding-top的值，使用百分比的形式，这个值是相对于元素的宽而定的，好比我上面的一张图片的宽度是1024px，高度为316px；那么如今的

padding-top = （高度 / 宽度 ）＊ 100% ＝ （316 ／ 1024）＊ 100% ＝  30.85%;

可是仅仅对图片高度和宽度缩放的放还不够，我门还必须添加 background-size:cover, 使这个属性让背景铺满元素的，可是IE8及如下不支持该属性，所以为了兼容IE下面的浏览器，我门还须要再加一个属性 background-position: center ; 同时我门也要保证 图片的宽度最大等于父容器的宽度；所以下面的HTML代码以下：

<h3>使用padding-top实现响应性图片(图片的宽度是1024px，高度是316px)</h3> <div class="column"> <div class="figure"></div> </div>

css代码以下：

.column{ max-width: 1024px; } .figure { padding-top:30.85%; /* 316 / 1024 */ background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat; background-size:cover; background-position:center; }

效果以下：

注意：具体的效果能够本身复制代码到浏览器运行下便可～

转载自：：http://www.cnblogs.com/tugenhua0707/