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

版权声明：本文为博主原创文章,转载请注明出处，仅用于学习交流和资源共享。关注新浪微博:极客James https://blog.csdn.net/zc639143029/article/details/71106735

新浪微博:极客灯
学习交流及免费资料获取~请关注微信公众号并回复【我要资料】

遇到的问题
最近在做H5开发，遇到了问题，UI给了1920px*600px的图片，但是图片在不同的分辨率下尤其是小屏幕显示总会出现问题，图片被莫名的压缩了，为了解决这个问题，谷歌了好久找到了解决方案。

解决方案
用div进行布局然后把图片设置为div的背景图 设置如下属性，让图片居中，不重复，宽度100%，这是固定高度，让它从两边切。

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

对比下：
这是个1920*768的原图

网页效果图：
http://www.yi-chengwang.com/