标签：
bachground-size属性就是定义背景图片的大小，其值有：auto , 像素值 , 百分比 , cover , contain 。
background-size: auto，默认值，以图片自身大小填充元素，根据元素大小来调节自身比例，不会让图片变形。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size属性</title> <style type="text/css"> div{ width:300px; height:150px; border:1px solid black; background:url("photo.jpg") no-repeat; } </style> </head> <body> <div></div> </body> </html>
背景图片本身大小—width:200px ，height:133px ，上述代码的效果图如下：
像素值，比如 30px 50px，分别表示width height
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size属性</title> <style type="text/css"> div{ width:300px; height:150px; border:1px solid black; background:url("photo.jpg") no-repeat; background-size:250px 100px; } </style> </head> <body> <div></div> </body> </html>
将图片的width设置为250px，height设置为100px，效果图为：
百分比，比如 30% 50%，分别表示width height ，该百分比相对于本元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size属性</title> <style type="text/css"> div{ width:300px; height:150px; border:1px solid black; background:url("photo.jpg") no-repeat; background-size:80% 50%; } </style> </head> <body> <div></div> </body> </html>
将图片的宽设置为相对于div的宽的80%，长相对于div的长的50%，效果如下：
cover，将图片等比例缩放，图片刚好全部占满本元素为止，这可能会到导致宽或高其中之一会溢出而被舍弃
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size属性</title> <style type="text/css"> div{ width:300px; height:150px; border:1px solid black; background:url("photo.jpg") no-repeat; background-size:cover; } </style> </head> <body> <div></div> </body> </html>
图片将铺满整个元素，不过可能会因为比例不对而到时宽或高其中之一溢出而被舍弃，效果图如下：
对比原图，该图的高溢出一部分被舍弃。
contain，将图片等比例缩放， 图片的宽或长刚好100%铺满本元素的长或宽即可，这可能会导致宽或长不足100%
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-size属性</title> <style type="text/css"> div{ width:300px; height:150px; border:1px solid black; background:url("photo.jpg") no-repeat; background-size:contain; } </style> </head> <body> <div></div> </body> </html>
图片的宽或高铺满div的宽或高，效果如下图：
当图片的高铺满div的高时，图片的宽还没铺满div的宽。
标签：
原文地址：http://www.cnblogs.com/yezi-dream/p/5699202.html
