关于background-size属性和图片自适应的理解
一、background-size:设定背景图像的尺寸。
浏览器支持的程度:IE9+, Firefox4+, opera, chrome, safari5+;
基本语法:background-size: length | percentage | cover | contain;
1:length
该属性值是设置背景图像的宽度和高度的,第一个值是宽度,第二个值是设置高度的。如果只设置第一个值,那么第二个值会自动转换为 “auto”;
2:percentage
该属性是以父元素的百分比来设置图片的宽度和高度的,第一个值是宽度,第二个值是高度。如果只设置一个值,那么第二个值会被设置为 “auto”;
3:cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
4:contain
把图像扩展至最大尺寸,以使宽度和高度完全适应内容区域。
理解:
背景图需给父元素设置固定宽高。
length、percentage可以理解为手动设置背景图的尺寸。length是具体值,percentage是父元素百分比(图片宽高比会变化)
cover 如果图片不足以覆盖背景区域,延展图片使其完全覆盖背景区域。(图片宽高比不变)
contain 延展图片,使其一边到达区域边缘即停止。(图片宽高比不变)如果宽度先到达,等同于background-size:100% auto
cover与contain的异同:
相同:都不改变图片比例,延展图片。
不同:contain延展到一边到达区域边缘即停止,cover会继续延展至另一边也到达区域边缘。
二、图片自适应
有些场景想要图片高度自适应,比如网站头部宽度100%的banner图,如果用背景图,要么变形,要么覆盖不全。
可以通过使用图片,并设置宽度100%来自适应解决。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .column { width: 100%; } .figure { width: 100%; } </style> </head> <body> <div class="column"> <img class="figure" src="img/1.jpg"/> </div> </body> </html>
三、响应式背景图(效果等同于二、图片自适应)
原理:使用padding-top:(percentage)把背景区域撑开,实现响应式背景图片
padding-top = (高度 / 宽度 )* 100%
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .column { width: 100%; } .figure { padding-top: 30.85%;/* (宽/高) */ background: url("img/1.jpg") no-repeat; background-size: cover;/* 背景铺满元素 */ background-position: center;/* 兼容ie8及以下 */ } </style> </head> <body> <h3>使用padding-top实现响应性图片</h3> <div class="column"> <div class="figure"></div> </div> </body> </html>