css background-size 用背景图像填充 div，研究包括包含属性测试的封面

背景-size用背景图片填充div

在开发中，经常需要给div填充一张图片作为div背景图片。请求

background-size 值及说明

background-size 有 3 个属性，即

background-size： cover

MDN 文档说明：缩放背景图片以覆盖背景区域。背景图像的一部分不可见。该关键字是 contains 的反义词。尽可能缩放图像并保持图像的纵横比（图像不能被挤压）。图像“覆盖”容器的整个宽度或高度。当图像和容器尺寸不同时，图像会在左/右或上/下进行裁剪。

这里主要解释的是红色标记的两个区域是它会保留图像的方面。比例 和 如果图像和容器的尺寸不同，则图像将被左/右或上/下裁剪。 稍后会举例说明

background-size：包含

MDN 文档说明：缩放背景图像以适合背景区域。背景区域可能是空的。尽可能衡量图像大小并保持图像长宽比（图像不紧密）的关键词。在容器中的信箱上画画。如果图片和容器大小不同，空白区域（上/左下/右）会被背景颜色填充。

这里主要解释一下，标红的两个区域是它当图像和容器尺寸不同时，将保持图像的宽高比和用背景颜色填充空白区域（左/右/上/右）。 稍后会以

背景-size为例进行说明：宽度值，高度值；

分为固定尺寸和百分比和自动表示硬尺寸、； auto 表示根据背景图像的长宽比来调整背景图像的大小。 。

percent 的 MDN 文档描述了 值，该值指定背景图像相对于背景区域（背景位置区域）的百分比。 背景区域由background-origin 设置。默认是网格模型的填充区域和填充。也可以只设置在内容区域，或者也包括边框。如果附件是固定的，则背景区域是浏览器中可见的区域（即视口），不包括滚动条。它不能是负值。

实验与陈述

这次我选择了Lu Dian作为背景图片。该图像的尺寸为260*234，长宽比为260/234 ≈ 1.11


0。在下面的测试中，最上面的是性能图像，下面的侧面是原始图像

背景-size：包含


背景-size：关闭


背景-size：自动（自动）


背景-size：100% 100% 分析解释：首先，包含是不可能的，即包含原则要保持长宽比，将图像完全放入div， div 为 200×200。原图是260×234，所以要插入一个div，宽度是260→200，高度是200/宽高比（1.11）=”0♼下面会是空的。
其次，此时的封面不符合要求。虽然看上去符合要求，但是和原图有什么不同吗？原因是覆盖与包含完全相反，需要全覆盖。因此，要覆盖它，您必须从较小的高度开始计数。 的高度为234→200，的宽度等于200×1.11 = 222，图像的一部分将在右侧被剪切。
其次，自动与原图尺寸不一致。

所以，背景-size：100%，100%；符合你想要的。按div大小计算

请参阅上面的说明，自行分析其他div大小和不同大小的图像。
个人推荐使用背景-size：100%、100%；