Open willson-wang opened 6 years ago
单张图片的背景大小可以使用以下三种方法中的一种来规定： 使用关键词 contain 使用关键词 cover 设定宽度和高度值 当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值: 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 每个值可以是<length>, 是 <percentage>, 或者 auto.
iphone5下 backgrund-size: auto/contain/cover/100% auto/100% 100%;是一致的效果,图片高保真并铺满空间
iphone6下 background-size: auto; 图片按原尺寸显示并四边留白
background-size: contain/cover/100% auto/100% 100%;是一致的效果图片高保真并铺满空间
安卓机下 background-size: auto; 图片裁剪
结论1：背景图片的展示依赖原图尺寸与div容器尺寸，当div容器尺寸大于or等于图片实际尺寸的时候，background-size只为auto的时候，会展示不同的效果，当图片原尺寸小于容器尺寸的时候，四边会留白，当图片尺寸大于原容器尺寸的时候，图片会裁剪；其它几个值都是保持高保证并铺满整个容器；
iphone5下 backgrund-size: auto/cover/100% auto;宽度沾满空间，高度被裁剪
backgrund-size: contain/100% 100%;图片缩放全部展示在容器内，两边留白
backgrund-size: 100% 100%;图片变形，但是铺满空间
iphone6下 background-size: auto; 宽度按原尺寸展示，高度被裁剪
background-size: contain；图片缩放全部展示在容器内，两边留白
background-size: cover/100% auto；图片宽度占满空间，高度被裁剪
background-size: 100% 100%；图片变形，但是铺满空间
background-size: contain；图片缩放，宽度留白
background-size: cover/100% auto；宽度铺满，高度被裁剪
结论2：背景图片的原图尺寸大于div容器的尺寸时，会根据background-size的值来进行不同的展示， background-size: auto; 尽量用图片原尺寸占满空间，就是把原图片的尺寸看成一个矩形，容器的宽高看成一个矩形，居中展示的是两个矩形的交集，所以当图片的原尺寸大于容器的部分会被裁剪掉，小于的部分全部展示并留白，等于的部分刚好铺满；
background-size: contain; 通过缩小or放大，让整张图片都在容器内，所以当图片的原尺寸中的某一项大于容器某一项的尺寸时，为了保证整张图片都能过展示在容器内，会对大于的一边进行缩放，同时为了保证图片不失真，会对另一边同时进行缩放，所以等于or小于的那一边就会出现留白，当图片的原尺寸中的某一项小于容器某一项的尺寸时，两边同时放大，已宽度为准，高度上下可能会留白
background-size: cover/100% auto；通过放大or搜小宽度，然后根据缩放的比列来计算高度，当放大or缩小后的图片尺寸大于容器尺寸时，超出的图片会被裁剪；
background-size: 100% 100%; 图片占满容器，如果放大or缩小后的尺寸，大于or小于容器的尺寸都会失真；
iphone5下 backgrund-size: auto/contain/100% auto;宽度沾满空间，高度两边留白
backgrund-size: cover; 图片放大高度全部展示在容器内，宽度被裁剪，高保真
iphone6下 background-size: auto; 宽度按原尺寸展示，四边留白
background-size: contain/100% auto；图片宽度占满空间，高度两边留白
background-size: cover；图片高度占满空间，宽度被裁剪，高保真
background-size: contain/100% auto；图片宽度占满，高度两边留白
background-size: cover；图片高度铺满，宽度被裁剪，高保证
结论3：背景图片的原图尺寸大于div容器的尺寸时，会根据background-size的值来进行不同的展示， background-size: auto; 尽量用图片原尺寸占满空间，就是把原图片的尺寸看成一个矩形，容器的宽高看成一个矩形，居中展示的是两个矩形的交集，所以当图片的原尺寸大于容器的部分会被裁剪掉，小于的部分全部展示并留白，等于的部分刚好铺满；
background-size: contain/100% auto; 通过缩小or放大，让整张图片都在容器内，所以当图片的原尺寸中的某一项大于容器某一项的尺寸时，为了保证整张图片都能过展示在容器内，会对大于的一边进行缩放，同时为了保证图片不失真，会对另一边同时进行缩放，所以等于or小于的那一边就会出现留白，当图片的原尺寸中的某一项小于容器某一项的尺寸时，宽度会占满容器，高度显示原图片尺寸高度，高度上下超出部分留白
background-size: cover；通过放大or缩小宽度，然后根据缩放的比列来计算高度，当放大or缩小后的图片尺寸大于容器尺寸时，超出的图片会被裁剪，小于容器的尺寸时会铺满容器；
背景图片的展示跟原图片尺寸与容器尺寸相关；
background-size: auto; 尽量用图片原尺寸占满空间，就是把原图片的尺寸看成一个矩形，容器的宽高看成一个矩形，居中展示的是两个矩形的交集，所以当图片的原尺寸大于容器的部分会被裁剪掉，小于的部分全部展示并留白，等于的部分刚好铺满；不推荐使用该值；（一句话，取原图片尺寸与容器尺寸的交集并剧中展示）；
background-size: contain; 通过缩小or放大，让整张图片都在容器内，所以当图片的原尺寸中的某一项大于容器某一项的尺寸时，为了保证整张图片都能过展示在容器内，会对大于的一边进行缩放，同时为了保证图片不失真，会对另一边同时进行缩放，所以等于or小于的那一边就会出现留白，当图片的原尺寸中的某一项小于容器某一项的尺寸时，宽度会占满容器，高度显示原图片尺寸高度，高度上下超出部分留白；注意放大后的图片高度是不会超过原尺寸高度；（一句话，整张图片始终会全部显示在容器内，超过部分会被裁剪，小于部分会被留白）；
background-size: cover; 通过缩小or放大，让整张图片已最好的比例展示在容器内，当原图片尺寸大于容器尺寸时，图片会被缩放，缩放后的高度大于容器高度则被裁剪，小于容器高度则会铺满；当原尺寸小于容器尺寸时，图片会被放大，放大后超出的部分会被裁剪；（一句话，会按图片原尺寸宽or高来放大与缩小得出当大or缩小之后的图片，然后与容器尺寸取交集，超出部分裁剪，注意这里始终会让一边铺满，另一边被裁剪）；
background-size: 100% auto; 宽度铺满整个容器，高度根据宽度放大or缩小的比例进行对应的放大or搜小，当放大后的高度大于容器高度，则会被裁剪，小于容器高度则会按原图高度展示，高度两边留白；（一句话概括，宽度始终占满容器，高度随宽度比例计算，最大高度不会超过原尺寸高度）；
background-size: 100% 100%; 只有当容器的尺寸与图片原尺寸一致时才不会失真，其它情况都会失真；
其实就是三个尺寸之间的关系，图片原尺寸，图片被放大or缩小之后的尺寸，容器尺寸；
当我们对图片的展示要求较高时，最好的图片展示方式就是固定图片原尺寸，然后background-size: 100%; 容器宽高100%/图片原尺寸高度；注意这里的图片原尺寸至少是二倍图；
参考连接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸，只考虑单张图片的背景图设置
一、图片原尺寸640/480，div尺寸100%/7.5rem(已640px为基准，7.5rem <=> 240px)
iphone5下 backgrund-size: auto/contain/cover/100% auto/100% 100%;是一致的效果,图片高保真并铺满空间
iphone6下 background-size: auto; 图片按原尺寸显示并四边留白
background-size: contain/cover/100% auto/100% 100%;是一致的效果图片高保真并铺满空间
安卓机下 background-size: auto; 图片裁剪
background-size: contain/cover/100% auto/100% 100%;是一致的效果图片高保真并铺满空间
结论1：背景图片的展示依赖原图尺寸与div容器尺寸，当div容器尺寸大于or等于图片实际尺寸的时候，background-size只为auto的时候，会展示不同的效果，当图片原尺寸小于容器尺寸的时候，四边会留白，当图片尺寸大于原容器尺寸的时候，图片会裁剪；其它几个值都是保持高保证并铺满整个容器；
二、图片原尺寸640/480 div尺寸100%/5rem(已640px为基准，5rem <=> 160px)
iphone5下 backgrund-size: auto/cover/100% auto;宽度沾满空间，高度被裁剪
backgrund-size: contain/100% 100%;图片缩放全部展示在容器内，两边留白
backgrund-size: 100% 100%;图片变形，但是铺满空间
iphone6下 background-size: auto; 宽度按原尺寸展示，高度被裁剪
background-size: contain；图片缩放全部展示在容器内，两边留白
background-size: cover/100% auto；图片宽度占满空间，高度被裁剪
background-size: 100% 100%；图片变形，但是铺满空间
安卓机下 background-size: auto; 图片裁剪
background-size: contain；图片缩放，宽度留白
background-size: cover/100% auto；宽度铺满，高度被裁剪
background-size: 100% 100%；图片变形，但是铺满空间
结论2：背景图片的原图尺寸大于div容器的尺寸时，会根据background-size的值来进行不同的展示， background-size: auto; 尽量用图片原尺寸占满空间，就是把原图片的尺寸看成一个矩形，容器的宽高看成一个矩形，居中展示的是两个矩形的交集，所以当图片的原尺寸大于容器的部分会被裁剪掉，小于的部分全部展示并留白，等于的部分刚好铺满；
background-size: contain; 通过缩小or放大，让整张图片都在容器内，所以当图片的原尺寸中的某一项大于容器某一项的尺寸时，为了保证整张图片都能过展示在容器内，会对大于的一边进行缩放，同时为了保证图片不失真，会对另一边同时进行缩放，所以等于or小于的那一边就会出现留白，当图片的原尺寸中的某一项小于容器某一项的尺寸时，两边同时放大，已宽度为准，高度上下可能会留白
background-size: cover/100% auto；通过放大or搜小宽度，然后根据缩放的比列来计算高度，当放大or缩小后的图片尺寸大于容器尺寸时，超出的图片会被裁剪；
background-size: 100% 100%; 图片占满容器，如果放大or缩小后的尺寸，大于or小于容器的尺寸都会失真；
三、图片原尺寸640/480 div尺寸100%/9rem(已640px为基准，9rem <=> 288px)
iphone5下 backgrund-size: auto/contain/100% auto;宽度沾满空间，高度两边留白
backgrund-size: cover; 图片放大高度全部展示在容器内，宽度被裁剪，高保真
backgrund-size: 100% 100%;图片变形，但是铺满空间
iphone6下 background-size: auto; 宽度按原尺寸展示，四边留白
background-size: contain/100% auto；图片宽度占满空间，高度两边留白
background-size: cover；图片高度占满空间，宽度被裁剪，高保真
background-size: 100% 100%；图片变形，但是铺满空间
安卓机下 background-size: auto; 图片裁剪
background-size: contain/100% auto；图片宽度占满，高度两边留白
background-size: cover；图片高度铺满，宽度被裁剪，高保证
background-size: 100% 100%；图片变形，但是铺满空间
结论3：背景图片的原图尺寸大于div容器的尺寸时，会根据background-size的值来进行不同的展示， background-size: auto; 尽量用图片原尺寸占满空间，就是把原图片的尺寸看成一个矩形，容器的宽高看成一个矩形，居中展示的是两个矩形的交集，所以当图片的原尺寸大于容器的部分会被裁剪掉，小于的部分全部展示并留白，等于的部分刚好铺满；
background-size: contain/100% auto; 通过缩小or放大，让整张图片都在容器内，所以当图片的原尺寸中的某一项大于容器某一项的尺寸时，为了保证整张图片都能过展示在容器内，会对大于的一边进行缩放，同时为了保证图片不失真，会对另一边同时进行缩放，所以等于or小于的那一边就会出现留白，当图片的原尺寸中的某一项小于容器某一项的尺寸时，宽度会占满容器，高度显示原图片尺寸高度，高度上下超出部分留白
background-size: cover；通过放大or缩小宽度，然后根据缩放的比列来计算高度，当放大or缩小后的图片尺寸大于容器尺寸时，超出的图片会被裁剪，小于容器的尺寸时会铺满容器；
background-size: 100% 100%; 图片占满容器，如果放大or缩小后的尺寸，大于or小于容器的尺寸都会失真；
四、总结
背景图片的展示跟原图片尺寸与容器尺寸相关；
background-size: auto; 尽量用图片原尺寸占满空间，就是把原图片的尺寸看成一个矩形，容器的宽高看成一个矩形，居中展示的是两个矩形的交集，所以当图片的原尺寸大于容器的部分会被裁剪掉，小于的部分全部展示并留白，等于的部分刚好铺满；不推荐使用该值；（一句话，取原图片尺寸与容器尺寸的交集并剧中展示）；
background-size: contain; 通过缩小or放大，让整张图片都在容器内，所以当图片的原尺寸中的某一项大于容器某一项的尺寸时，为了保证整张图片都能过展示在容器内，会对大于的一边进行缩放，同时为了保证图片不失真，会对另一边同时进行缩放，所以等于or小于的那一边就会出现留白，当图片的原尺寸中的某一项小于容器某一项的尺寸时，宽度会占满容器，高度显示原图片尺寸高度，高度上下超出部分留白；注意放大后的图片高度是不会超过原尺寸高度；（一句话，整张图片始终会全部显示在容器内，超过部分会被裁剪，小于部分会被留白）；
background-size: cover; 通过缩小or放大，让整张图片已最好的比例展示在容器内，当原图片尺寸大于容器尺寸时，图片会被缩放，缩放后的高度大于容器高度则被裁剪，小于容器高度则会铺满；当原尺寸小于容器尺寸时，图片会被放大，放大后超出的部分会被裁剪；（一句话，会按图片原尺寸宽or高来放大与缩小得出当大or缩小之后的图片，然后与容器尺寸取交集，超出部分裁剪，注意这里始终会让一边铺满，另一边被裁剪）；
background-size: 100% auto; 宽度铺满整个容器，高度根据宽度放大or缩小的比例进行对应的放大or搜小，当放大后的高度大于容器高度，则会被裁剪，小于容器高度则会按原图高度展示，高度两边留白；（一句话概括，宽度始终占满容器，高度随宽度比例计算，最大高度不会超过原尺寸高度）；
background-size: 100% 100%; 只有当容器的尺寸与图片原尺寸一致时才不会失真，其它情况都会失真；
其实就是三个尺寸之间的关系，图片原尺寸，图片被放大or缩小之后的尺寸，容器尺寸；
当我们对图片的展示要求较高时，最好的图片展示方式就是固定图片原尺寸，然后background-size: 100%; 容器宽高100%/图片原尺寸高度；注意这里的图片原尺寸至少是二倍图；
参考连接： https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size