background-size取背景图片填满div

在开发中，常有须要将一张图片作为一个div的背景图片充斥div的需求

background-size的取值及诠释

background-size共有三种属性，别离为

background-size: cover

MDN文档诠释说明：缩放背景图片以完齐覆盖背景区，可能背景图片部份看不见。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

这里的枢纽说明在于标红的两个区域，别离是它会保持图片的宽下比战当图像战容器具有不同的尺寸时，图像被左/右或顶部/底部裁剪。以后会结合例子说明

background-size: contain

MDN文档诠释说明：缩放背景图片以完齐装进背景区，可能背景区部份空白。A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

这里的枢纽说明在于标红的两个区域，别离是它会保持图片的宽下比战当图像战容器具有不同的尺寸时，空区域（左/右/上/右）填充背景致。以后会结合例子说明

background-size: width-value,height-value;

分为固定大小战百分比战auto，固定大小就是写死；auto就是以背景图片的比例缩放背景图片。。

百分比的的MDN文档诠释说明<percentage> 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默许为盒模型的内容区取内边距，也可设置为只要内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括转动条。不能为背值。

实验及声明

这次选用鲁殿作为背景图，这张图的尺寸是260*234，宽下比为260/234 ≈ 1.11

假设一div的宽下为200*200，下面测试中上为显示图，下为原图

background-size: contain

background-size: cover

background-size: auto (auto)

background-size: 100% 100%

分析及诠释：起首contain是不可的，道理在于contain要保持宽下比将图片完齐放进div中，div为200×200。原图为260×234，所以为了放进div，宽260→200，那末下就得200/宽下比(1.11) = 180，所以会有下面的空白。
再其次，cover在这个时刻也是不切合要求的，虽然看起来貌似切合要求，但是取原图是有差此外吗，原果原由在于cover取contain完齐放进相反，它要求完齐覆盖。所以要覆盖就要从更小的下计算。下234→200，宽就等于200×1.11 = 222，图像就会被右部裁剪掉一部份。
再再其次，auto是原图大小也是不切合的。

所以，background-size: 100%, 100%;是切合需求的。按照div的大小进行计算

其他各种大小div取各种大小的图片搭配请参照上述说明自行分析。
个人建议这种需求皆使用background-size: 100%, 100%;

转载请注明： 帝国CMS模板 » css background-size取背景图片填满div的具体研究包括cover contain属性测试