前言：
css应用中，我们常会碰到background-size的用法，不妨下面总结一下，以便后续查看。
一、先弄个简单的box框。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .box { width: 100%; height: 100%; background-image: url('images/page_bg_29078d1.jpg'); background-repeat: no-repeat; /* background-size: 100% 100%; */ /* background-size: auto 100%; */ /* background-size: 100% auto; */ /* background-size: contain; */ background-size: cover; } </style> </head> <body> <div class="box"> </div> </body> </html>
二、看效果：
情况1：background-size: 100% 100%;
看的出来，图片长宽都显示出来了，但是图片变形了。
情况2：background-size: auto 100%;
看到没，纵向没问题，横向只能显示一部分。
情况3：background-size: 100% auto;
看到没，横向能全部显示出来，但是相对，整体缩小了很多。
情况4：background-size:contain；
;和上面效果一样。
情况5：background-size: cover;
和情况2一样。
小结：
平时根据需要以下三个就可以了。
background-size: 100% 100%;
background-size: contain;
background-size: cover;