background-size和背景图填充div在开发中，经常需要用一张图片作为一个div的背景图来填充divbackground的值-sizeandExplanationbackground-size有三个属性，分别是background-size:coverMDN文档解释：缩放背景图片以完全覆盖背景区域，背景图片可能不会部分可见。与contain相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）。图像“覆盖”了容器的整个宽度或高度。当图像和容器具有不同尺寸时，图像将被裁剪为左/右或上/下。这里的重点在于标红的两个区域，即它会保持图像的纵横比，当图像和容器有不同的尺寸时，图像被左/右或上/下裁剪。我将在后面举例说明background-size:contain。MDN文档解释：将背景图片缩放至完全适合背景区域，背景区域可能会出现部分空白。尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）的关键字。图像在容器内被加了信箱。当图像和容器具有不同的尺寸时，空白区域（左/右的顶部/底部）用背景色填充。这里要注意的是标红的两个区域，就是保持图片的宽高比，当图片和容器尺寸不同时，空白区域（左/右/上/右）填充背景颜色。后面会举例说明background-size:width-value,height-value;可分为固定大小、百分比和自动。fixedsize写死；auto是根据背景图片的比例缩放背景图片。.百分比的MDN文档解释了值，该值指定背景图像相对于背景定位区域的百分比。背景区域由background-origin设置。默认是盒子模型的内容区域和填充。也可以设置为只有内容区域，或者也包括边框。如果attachment固定，则背景区域为浏览器可见区域（即viewport），不包括滚动条。不能为负。实验与陈述这一次选择了陆殿作为背景图。这张图片的尺寸是260*234，纵横比是260/234≈1.11。假设一个div的宽高是200*200，下面测试中左边是表现图。右边是原图background-size:containbackground-size:coverbackground-size:auto(auto)background-size:100%100%分析解释：首先contain是不行的，原则是contain要保持调整宽高比，将图片完全放入div中，div为200×200。原图是260×234，所以要放到div里面，宽度是260→200，那么高度就得200/纵横比（1.11）=180，所以下面会有空白。其次，此时封面不符合要求。虽然看起来符合要求，但是和原图有区别吗？原因是cover与contain完全相反，需要完全覆盖。所以要覆盖有必要从较小的高度计算。高为234→200，宽为200×1.11=222，右裁剪部分图片。其次，auto是原图的尺寸，不匹配。因此，background-size:100%,100%;符合要求。根据div的大小计算。各种尺寸的div搭配各种尺寸的图片，请参考上面的说明自行分析。个人建议使用background-size:100%，对于这个需求100%；
