CSS3 Background-size 详解
前段时间在做关于响应式的页面时,由于要兼容ie8,并且要保证图片等比缩放,且对图中内容的显示有要求,导致无法使用background-size等属性,最终放弃了使用background,用<img>
来替代。这样增加了代码量而且看起来很不clean。
但是很多情况下用background还是可以达到目的的,并且有解决方案(后面会提到)。下面我就详细讲下background-size。
background-size
background-size: auto ||
<length>
||<percentage>
|| cover || contain
取值说明:
- auto: 此值为默认值,保持背景图片的原始高度和宽度
- length: 此值为具体的值,可能会造成与图片原始宽高比不一致
- percentage: 此值为百分比,且只能用在block,inline-block元素上。注意是相对所在容器的百分比。
- cover: 此值是将图片放大(当然了,如果图片本身大于容器,图片会等比缩放到合适宽高的)以适应容器大小,这个属性也是应用最多的。
- contain: 此值是将图片缩小以在容器中显示完整图片。当容器的宽高比例与图片不一致时,可能会出先上下或左右留出空隙。
举个例子
1. auto | length | percentage
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2. cover
cover
属性会对图片进行剪裁,当图片大小超过容器大小时。所以一般也会配合background-position
来决定显示图片内容的位置。
- 1
- 1
效果:
- 1
- 2
- 1
- 2
效果:
3. contain
contain
属性将图片缩小至以在容器中显示完整图片,但大多数情况下,由于容器宽高比例与图片比例不同,造成图片与容器上下或左右留边的情况。
- 1
- 2
- 1
- 2
效果:
兼容性
虽然ie9+才支持background-size属性,但大家的智慧是无穷尽的,网上大家提供了几种解决方案,ie8及以下可以使用ie filters来模拟cover属性(据说某些情况下会有问题,本人测试过和cover效果还是有区别的):
- 1
- 1
还有一种方式需引入一个jQuery插件: jquery.backgroundSize.js
大概原理就是当浏览器不支持该属性时,用<img>
标签替换