使用background-size引发的思考

CSS

昨天在一个前端交流群里一个成员提出了一个非常有趣的问题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% autobackground-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引发的思考

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器