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;
    }