contain会完全显示但可能会铺不满元素,因为没有

作者: 前端  发布:2019-11-21

在rem布局下使用背景图片以及sprite

2016/08/29 · CSS · 2 评论 · rem, sprite

原文出处: 吕大豹   

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss。用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片。本文就来聊聊这方面的东西。

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

1 <div class="bsize1 bsize5"></div>

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

9159.com 1

 

   然后修改background-position就可以取到sprite上的其他图片了,background-position也取具体值,也是按照切出来的图的尺寸就行。

sprite图片的处理

为了合并图片请求我们经常会用到sprite技术。在rem布局方案下,使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部,contain和cover只能对整张图片进行缩放,没办法控制到局部的大小。

比如有如下一张200*50的sprite图。

9159.com 2

在使用contain缩放后是这样的

9159.com 3

所以在处理sprite图片时,我们只能给background-size取具体值。那么这个值取多少呢?其实只要写我们切出来的图片的实际尺寸就行。

比如我们的元素为50*50px,sprite图片为200*50px,那css应该如下:

CSS

#cpt{ width: 0.5rem; height: 0.5rem; background-image: url(cpt.png); background-size: 2rem 0.5rem; }

1
2
3
4
5
6
#cpt{
    width: 0.5rem;
    height: 0.5rem;
    background-image: url(cpt.png);
    background-size: 2rem 0.5rem;
}

然后修改background-position我们就可以取到sprite上的其他图片了。background-position也取具体值,也是按照切出来的图的尺寸就行。

比如我这张图片是一个帧动画的4个帧,每一帧的背景图片应该如下:

CSS

#cpt.status1{ background-position: 0 0; } #cpt.status2{ background-position: -0.5rem 0; } #cpt.status3{ background-position: -1rem 0; } #cpt.status4{ background-position: -1.5rem 0; }

1
2
3
4
5
6
7
8
9
10
11
12
#cpt.status1{
    background-position: 0 0;
}
#cpt.status2{
    background-position: -0.5rem 0;
}
#cpt.status3{
    background-position: -1rem 0;
}
#cpt.status4{
    background-position: -1.5rem 0;
}

利用这个尺寸,我们来做个小动画试试。

9159.com 4

本篇文章到此结束,啰嗦了这么多,发现其实可以用两句话就说完–!

1 赞 6 收藏 2 评论

9159.com 5

background-size的基本属性

background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图片等高度100%的时候并不生效,图片没有显示出来,因为没有设置具体的高度值,浏览器渲染的时候并没有高度,因此当时解决的方法是使用css3中的媒体查询真对不同的分辨率等比例缩放不同的height(高度)。

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

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

一:length

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

二:percentage

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

三:cover

      把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

四:contain

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

3.background-size可以取具体的值以及百分比。

双倍设计稿

为了能在视网膜屏下清晰显示,现在的设计稿一般都是基于iPhone5的宽度(320)或者iphone6的宽度(375),进行双倍。也就是说,设计稿的宽度一般是640或者750.

这个尺寸也不是绝对的,因为iPhone6 plus的dpr值为3,也有设计稿进行三倍尺寸,这样能在iPhone6 plus上完美显示。当然对于Android设备来说情况就更复杂了,dpr值什么样的都有,所以双倍设计稿算是一个折中方案,大体上能保证所有设备清晰显示图片。

此时,我们在页面上还要做一件事情,那就是动态设置<meta>中的viewport属性,将scale改成0.5(dpr为2)或者其他值,这样我们写css的时候,就可以按照原设计稿的尺寸来写了。

我们切出来的图片是双倍大小,但是页面上的元素已经被动态缩小了,如果要做背景图片的话,得想办法让图片跟着缩小才行。

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

1.CSS3为background-size属性增加了两个值:cover与contain。

background-size取具体值

大家知道background-size可以取具体的值以及百分比,那么我们直接把背景图片大小设置为跟元素大小一样不就完了吗?还费什么劲搞什么自适应。

当然是可以的。比如我们把上面的css改成这样:

CSS

#mm{ width: 0.9rem; height: 2rem; background-image: url(mm.jpg); background-size: 0.9rem 2rem; background-repeat: no-repeat; }

1
2
3
4
5
6
7
#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: 0.9rem 2rem;
    background-repeat: no-repeat;
}

完全可以实现同样的效果。

只是我本人在写css的时候很不喜欢写具体值,一般是能自适应就自适应。这样如果后期要改动元素的大小,只要改一处就行,所以我更喜欢用contain或cover。

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

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

padding-top = (高度 / 宽度 )*100% = (316 / 1024)* 100% =  30.85%;

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

<div class="column">
    <div class="figure"></div>
</div>

.column{
        max-width: 1024px;
 }
 .figure {
         padding-top:30.85%; /* 316 / 1024 */
         background: url("6.jpg") no-repeat;
          background-size:cover;
          background-position:center;
    }

9159.com 6

 

background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动...

4.在处理sprite图片时,只能给background-size取具体值。只要写切出来的图片的实际尺寸就行。

cover与contain

CSS3为background-size属性增加了两个值:cover与contain。这个两个值允许我们指定背景图片的自适应方式。它俩有什么区别呢?

从语言上描述,cover是拉伸图片使之充满元素,元素肯定是被铺满的,但是图片有可能显示不全。contain则是拉伸图片使图片完全显示在元素内,图片肯定能显示全,但是元素可能不会被铺满。

上面说的“可能”的情况,发生在元素尺寸和图片尺寸宽高比例不一致的时候。

下面通过例子来演示一下这两者的用法。比如我们以iPhone5为例,此时dpr为2,页面scale为0.5,基准字体大小为100px。设计稿上有一张90*200px的图片。那么css应该这么写:

CSS

#mm{ width: 0.9rem; height: 2rem; background-image: url(mm.jpg); background-size: contain; background-repeat: no-repeat; }

1
2
3
4
5
6
7
#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

 

效果如下:

9159.com 7

当元素与背景图片的大小一样,或者是宽高比例一致时,contain和cover的填充效果是一样的,因为两者在拉伸后总能使图片“恰好”完全充满元素。

但是有时候元素的宽高比例是不确定的,比如有一张宽度为100%,高度为200px的图片。此时contain和cover的区别就显示出来了。如下图:

9159.com 8

可以看到contain的时候,元素右侧有空白没有填满。而cover的时候,元素虽然填满了,但是有一部分图片已经拉伸到元素外部看不到了。这就是两者的区别,实际应用的时候要根据具体情况来定。

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

1 <div class="bsize1 cover"></div>

.cover {
        background-size:cover;
 }

9159.com 9

2.当元素与背景图片的大小一样,或者是宽高比例一致时,contain和cover的填充效果是一样的,因为两者在拉伸后总能使图片“恰好”完全充满元素。

rem布局

所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写。比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写:

CSS

div{ width: 1rem; height: 2rem; }

1
2
3
4
div{
    width: 1rem;
    height: 2rem;
}

那么最终得到的元素宽高就是100*200px了。

为了能够在不同尺寸的手机屏幕上自适应,需要用js来判断手机宽度,并动态设置<html>的字体大小,这样基准字体变了,元素的尺寸自然相应变化,达到了自适应的效果。

此处只介绍基本概念,rem布局方案的其他细节不是本篇的范畴。最早提这个方案的应该是winter寒老湿,有没有人更早使用我就不好考证了。

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

1 <div class="bsize1"></div>

1 .bsize1 {
2      width:400px;
3      height:200px;
4      background: url("1.jpg") no-repeat;
5      border:1px solid red;
6      overflow: hidden;
7   }

9159.com 10

  cover会铺满但是可能会显示不全,contain会完全显示但可能会铺不满元素。

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

1 <div class="bsize1 bsize3"></div>

1 .bsize3 {
2          background-size: 400px;
3         /*background-size:100% 100%;*/
4  }    

9159.com 11

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

不使用背景图片等情况下,给图片设置属性 width = 100%,它的高度会自适应的。如下HTML代码:

<div class="bsize-padding"><img src="3.jpg" width="100%"/></div>

9159.com 12

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

图片宽度设置100%,页面加载时会存在高度塌陷的问题,可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100;

<p>可以使用padding-top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p>
<div class="cover-paddingTop">
      <img src="5.jpg"/>
</div>

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

9159.com 13

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

<div class="bsize1 contain"></div>

.contain {
        background-size:contain;
  }

9159.com 14

本文由9159.com发布于前端,转载请注明出处:contain会完全显示但可能会铺不满元素,因为没有

关键词:

上一篇:没有了
下一篇:没有了