css 实现背景图片适配所有手机不压缩不裁剪
2019-01-11 本文已影响71人
拾钱运
#bg{
background:url("3.jpg") #fff 0% 0% / contain no-repeat
background-position:center;
}
如何让一个图片居中显示并且比例缩放 不裁剪 contain 他会偏向一边适应 不会居中所以需要background-position:center 居中 设置#fff (根据背景图主要颜色设置)是为了不让非开发人看出破绽 no-repeat 可以防止有些无聊人缩放浏览器完发现一些平铺的乐趣
我现在的方法只适用于 背景图是白色的哦!
background-size:cover/contain/ 100% 100%
cover :
适用于图片小于容器 的时候 将图片放大到最大,然后比例填充屏幕,裁剪 尽量重要信息不要太刻边
contain :
适用于图片大于容器的时候 他会根据屏幕的宽高适配成 容器能承载的宽高比尺寸 但是 他会有缝隙 设置background-position:center; 会上下左右居中,屏幕不合适的时候上下左右都会有缝隙,到时候可以根据背景图的主要颜色填充一下颜色即可。
100% 100%
会根据屏幕的宽高设置不会裁剪也不会有缝隙就是会有拉伸
做多图适配判断分辨率的话,很完美,但是性能会差些。看具体项目需求吧!