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属性测试