H5全屏轮播图如何居中显示图片不拉伸

新浪微博:极客灯
学习交流及免费资料获取~请关注微信公众号并回复【我要资料】
H5全屏轮播图如何居中显示图片不拉伸
文章图片

遇到的问题
最近在做H5开发,遇到了问题,UI给了1920px*600px的图片,但是图片在不同的分辨率下尤其是小屏幕显示总会出现问题,图片被莫名的压缩了,为了解决这个问题,谷歌了好久找到了解决方案。
解决方案
用div进行布局然后把图片设置为div的背景图 设置如下属性,让图片居中,不重复,宽度100%,这是固定高度,让它从两边切。

background: url(../banner.jpg) no-repeat center center; width:100%; height:600px; background-size: cover;

对比下:
这是个1920*768的原图
H5全屏轮播图如何居中显示图片不拉伸
文章图片

【H5全屏轮播图如何居中显示图片不拉伸】网页效果图:
http://www.yi-chengwang.com/

    推荐阅读