background-size

学习mark

 

注意，div泛指html元素

 

background-size: contain;

contain的含义是div容器要包含图片，

当div容器宽高任何一个小于图片宽高时，图片等比例缩小，直到高宽都完整的放到div容器之中，很显然，有可能没办法覆盖div容器，出现空白

反之，div容器宽高都大于图片宽高，完全没必要缩放

 

background-size: cover;

cover的含义是图片要完整覆盖div容器

当图片宽高任何一个都大于div容器宽高时，直接覆盖div容器，多余部分切除

反之，如果图片宽高任何一个小于div容器，图片等比例拉伸，直到全部能够覆盖div容器，很明显，图片要变形了

 

 

backgroupd-size: number auto;

auto表示，按照宽度缩放比例，高度也进行等比例缩放

 

反之，auto number，表示按照高度缩放比例，宽度也进行等比例缩放

 

效果参考：http://www.webhek.com/post/demo/background-size

 

http://www.cnblogs.com/tugenhua0707/p/5260411.html