使用background-size引发的思考

昨天在一个前端交流群里一个成员提出了一个非常有趣的问题background-size: 50%是什么意思与background-size: 50% 50%到底有什么区别呢，这个问题在群里引起了一番激烈的讨论，我也尝试分析一下

background-size: 50%是什么意思

查阅W3C上对background-size的介绍后可知background-size用于设置背景图片的宽度和高度，当给background-size属性的值设为百分比时，表示以父元素的百分比来设置背景图像的宽度和高度，如果只设置一个值，则第二个值会被设置为 “auto”，通过这段W3C上的介绍可知background-size: 50%是background-size: 50% auto的简写形式

猜想background-size: 50% 与 background-size: 50% 50% 的区别

通过前面的介绍可知background-size: 50%是background-size: 50% auto的简写形式，我曾天真的以为background-size: 50% auto与background-size: 50% 50%表示的是一个意思都是表示背景图片的宽度为父元素宽度的50%，背景图片的高度为父元素高度的50%，通过测试发现我被打脸了，最后得出的结论是background-size: 50% 50%表示的是背景图片的宽度为父元素宽度的50%，背景图片的高度为父元素高度的50%没错，background-size: 50% auto表示背景图片的宽度为父元素宽度的50%，背景图片的高度是根据背景图片的宽度与高度的比值计算得来的

计算设置了background-size: 50% 50%属性后背景图片的宽度和高度

下图是为背景图片设置了background-size: 50% 50%后运行在浏览器上的效果，为了比较直观，我在图片上标记了一些数值，点击此处查看代码

通过上图可知 父元素的宽度 = 500px 父元素的高度 = 400px 背景图片的宽度 = 父元素的宽度 X 50% = 500px X 50% = 250px 背景图片的高度 = 父元素的高度 X 50% = 400px X 50% = 200px

计算设置了background-size: 50% 属性后背景图片的宽度和高度

下图是为背景图片设置了background-size: 50%后运行在浏览器上的效果，为了比较直观，我在图片上标记了一些数值，点击此处查看代码

通过上图可知 父元素的宽度 = 500px 父元素的高度 = 400px 图片文件的宽度与高度的比值 = 图片文件的宽度 / 图片文件的高度 = 128px / 96px = 1.33 背景图片的宽度 = 父元素的宽度 X 50% = 500px X 50% = 250px 背景图片的高度 = 背景图片的宽度 / 图片文件的宽度与高度的比值 = 250px / 1.33 = 187.97px

meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果。 转载请注明： 【文章转载自meishadevs：使用background-size引发的思考】