<HTML><Head><style>Body{Overflow:Hidden; }#pic{margin:0 Auto;width:100%;Height:100%;padding:0;Max-width:100%;position:relative; }#img{position:Absolute; Left:0px;Top:0px;}</style></Head><Body> <DivID= "Pic"> <imgsrc=""ID= "img" /> </Div> <Scripttype= "Text/javascript">window.onresize=function() {resize (); }; functionResize () {//get the browser's width, including the appropriate Internet Explorer if(window.innerwidth)varWinwidth=window.innerwidth; Else if((document.body)&&(document.body.clientWidth))varWinwidth=Document.body.clientWidth; if(window.innerheight)varWinheight=Window.innerheight; Else if((document.body)&&(document.body.clientHeight))varWinheight=Document.body.clientHeight; varbg_rate=parsefloat (1920x1080/990);//the aspect ratio of the picture varbr_rate=parsefloat (Winwidth/winheight);//Browser aspect ratio //Depending on the aspect ratio, the width of the image is fixed so that the picture fills the screen without distortion, and the extra parts are hidden . if(Br_rate<bg_rate) {document.getElementById ('img'). Style.height=Winheight+ 'px'document.getElementById ('img'). Style.width= "'; }Else{document.getElementById ('img'). Style.width=Winwidth+ 'px'; document.getElementById ('img'). Style.height= "'; } }</Script></Body></HTML>
JS background image varies with browser size and keeps the picture intact