background-size
background-size:contain;
contain:包含
按比例调整图片,使得图片的宽度自适应容器的宽度。
相当于在ps中,约束比例设置原始图片的宽度值等于容器的宽度值。
如果图片过大,等比压缩后容器的高度方向上可能会有空白。
background-size:cover;
cover:覆盖
相当于ps中,约束比例设置原始图片的高度等于容器的高度。
得到的图片的宽度可能会大于容器的宽度,页面显示的时候会隐藏超出宽度部分。
background-size:100% 100%;
参数一:宽度值 百分比/固定值
参数二:高度值 百分比/固定值
相当于ps中,不约束比例设置原始图片高度等于容器高度,宽度等于容器宽度后得到的图片
可能出现的情况:图片压缩严重
background-size:inherit;
inherit:继承
不对原始图片进行任何处理,多余的进行隐藏。
不忘初心,方能始终