http://www.web008.net

对响应性图片等比例缩放

明亮CSS3中的background-size(对响应性图片等比例缩放)

2016/03/10 · CSS · background-size

原来的书文出处: 涂根华   

background-size的主导质量

background-size: 能够设定背景图像的尺码,该属性是css3中的,在运动端应用之处重重,比如最不认为奇之处在做响应性布局的时候,比方事先做的品种中有轮播图片,为了自适应不一样大小分辨率的图片,作者门供给接受css3中的媒体询问来针对不一样的分辨率设置宽度和中度,纵然这种艺术是能够缓慢解决难点,然而清除办法并不是太好,并且很麻烦,当然小编门也想过直接利用比例设置图片的大大小小,例如width(宽度): 百分之百,height(高度):百分百; 可是设置图片等惊人百分之百的时候并不奏效,图片并未有显示出来,因为还未有安装具体的万丈值,浏览器渲染的时候并从未中度,由此这个时候消除的艺术是应用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="" width="100%"/></div>

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

效果与利益如下图所示:

美高梅手机版 1

给图片设置一定的宽窄和冲天的代码如下:

比方说设置 固定宽度400px和可观200px后的图纸;

HTML代码如下:

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

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

css代码如下:

.bsize1 { width:400px; height:200px; backgroundnull:url("") no-repeat; border:1px solid red; overflow: hidden; }

1
2
3
4
5
6
7
.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;
  }

效果如下:

美高梅手机版 2

定点宽度400px和中度200px-使用background-size:400px 200px缩放设置

  1. 永远宽度400px和中度200px-使用background-size:400px 200px缩放设置;

HTML代码如下:

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

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

css代码如下:

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

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

成效如下:

美高梅手机版 3

固化宽度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>

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

css代码如下:

.bsize3 { background-size: 400px; }

1
2
3
.bsize3 {
         background-size: 400px;
}

成效如下:

美高梅手机版 4

确定地点宽度400px和中度200px-使用background-size:百分百 百分百的缩放设置

  1. 永远宽度400px和中度200px-使用background-size:百分之百 百分之百的缩放设置

HTML代码如下:

<h3>固定宽度400px和冲天200px-使用background-size:百分百百分百的缩放设置<h3> <div class="bsize1 bsize4"><div>

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

css代码如下:

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

1
2
3
.bsize4 {
        background-size:100% 100%;
  }

效率如下:

美高梅手机版 5

固化宽度400px和冲天200px-使用background-size:百分之百的缩放设置

  1. 固定宽度400px和冲天200px-使用background-size:百分百的缩放设置。

HTML代码如下:

<h3>固定宽度400px和惊人200px-使用background-size:百分百的缩放设置<h3> <div class="bsize1 bsize5"><div>

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

css代码如下:

.bsize5 { background-size: 100%; }

1
2
3
.bsize5 {
         background-size: 100%;
  }

如下所示:

美高梅手机版 6

应用质量cover来设置背景图片

  1. 采取质量cover来设置背景图片。

HTML代码如下:

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

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

css代码如下:

.cover { background-size:cover; }

1
2
3
.cover {
        background-size:cover;
}

功效如下:

美高梅手机版 7

接收质量contain来安装背景图片

  1. 利用性质contain来安装背景图片。

HTML代码如下:

<h3>使用质量contain来设置背景图片<h3> <div class="bsize1 contain"><div>

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

css代码如下:

.contain { background-size:contain; }

1
2
3
.contain {
        background-size:contain;
  }

效能如下:

美高梅手机版 8

给图片设置width属性百分百;中度自适应

8.  上面作者门使用图片来做,不接收背景图片等意况下,给图片设置属性 width = 百分之百的话,它的冲天会自适应的。如下HTML代码:

<h3>给图片设置属性宽度为百分之百的意况下,可自适应图片<h3> <div class="bsize-padding"><img src="" width="100%"/><div>

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

意义如下:

美高梅手机版 9

使用另风流倜傥种方法来消除图片自适应的难题--图片自适应难点

9. 施用另生机勃勃种艺术来消除图片自适应的难点--图片自适应难题,图片宽度设置百分之百,页面加载时会存在中度塌陷的主题素材,能够应用padding-top来设置百分比率来兑现自适应 padding-top = (图片的惊人/图片的幅度)*100;

如下HTML代码:

<h3>图片自适应难题,图片宽度设置百分之百,页面加载时会存在高度塌陷的标题</h3> <p>能够选取padding-top来设置百分比率来兑现自适应 padding-top = (图片的高度/图片的幅度)*100</p> <div class="cover-paddingTop"> <img src="; </div>

1
2
3
4
5
<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; }

1
2
3
4
5
6
7
8
9
10
.cover-paddingTop {
       position: relative;
       padding-top: 50%;
       overflow: hidden;
  }
.cover-paddingTop img{
      width:100%;
      position: absolute;
      top:0;
  }

效果如下:

美高梅手机版 10

利用padding-top:(percentage)完毕响应式背景图片

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

作者门都理解,管理在响应性布局的时候,背景图片都是等比例缩放,比如上边的采纳图片的景况,使用 引进的图形的话,那么设置她们的width属性为百分百;美高梅手机版 11 的话,中度就能等比例缩放,那是图形,不过假设是背景图片呢?笔者门从前的花色中的不乏先例的做法是基于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>

1
2
3
4
<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 */ backgroundnull:url("") no-repeat; background-size:cover; background-position:center; }

1
2
3
4
5
6
7
8
9
.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;
    }

效果如下:

美高梅手机版 12

在意:具体的效果可以友善复制代码到浏览器运转下就可以~

1 赞 4 收藏 评论

美高梅手机版 13

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。