html图片自适应屏幕大小

1.UI给的图片的大小是固定的

2.需要根据不同分辨率的手机适配图片大小,设置要在手机上显示

如图:

这里应用css3的background-size属性

首先设置背景图:

width: 100%; height: 2703px; background-image: url("./index.png"); background-size:100% 100%;

然后根据屏幕宽度设置图片的高度

window.onload=function () {
        document.getElementById('bgImg').style.height=getclientWidth()*2703/1920+'px'
        //2703/1920 是原图的宽高比例,保证其不被拉伸不失真
    }
    //  获取浏览器窗口宽度
    function getclientWidth()
    {
        var clientWidth=0;
        if(document.body.clientWidth&&document.documentElement.clientWidth)
        {
            var clientWidth = (document.body.clientWidth<document.documentElement.clientWidth)?document.body.clientWidth:document.documentElement.clientWidth;
        }
        else
        {
            var clientWidth = (document.body.clientWidth>document.documentElement.clientWidth)?document.body.clientWidth:document.documentElement.clientWidth;
        }
        return clientWidth;
    }