background-size

Posted 2020-08-27 王小窝

background-size:contain;

　　contain:包含

　　按比例调整图片，使得图片的宽度自适应容器的宽度。

　　相当于在ps中，约束比例设置原始图片的宽度值等于容器的宽度值。

　　如果图片过大，等比压缩后容器的高度方向上可能会有空白。

　　

 

　　

background-size:cover;

　　cover:覆盖

　　相当于ps中，约束比例设置原始图片的高度等于容器的高度。

　　得到的图片的宽度可能会大于容器的宽度，页面显示的时候会隐藏超出宽度部分。

　　

background-size:100% 100%;

　　参数一：宽度值 百分比/固定值

　　参数二：高度值 百分比/固定值

　　相当于ps中，不约束比例设置原始图片高度等于容器高度，宽度等于容器宽度后得到的图片

　　可能出现的情况：图片压缩严重

　　

background-size:inherit;

　　inherit:继承

　　不对原始图片进行任何处理，多余的进行隐藏。