图片跟随用户对浏览器的操作自动调整大小

来源：互联网发布：warframe 淘宝月神包编辑：程序博客网时间：2024/05/17 08:24

图片跟随浏览器大小改变

业务场景：登录页面一张背景图片需要跟随用户对浏览器的操作（放大、缩小、拖拽）自动调整

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>页面图片跟随浏览器大小变化</title>    <style type="text/css">        #zxdlbg {            position: absolute;            width: 100%;            height: 100%;            top: 0px;            left: 0px;            z-index: -1;        }    </style>    <script type="text/javascript">        window.onresize = window.onload = function () {            var w, h;            if (!!(window.attachEvent && !window.opera)) {                h = document.documentElement.clientHeight;                w = document.documentElement.clientWidth;            } else {                h = window.innerHeight;                w = window.innerWidth;            }            var bgImg = document.getElementById('zxdlbg').getElementsByTagName('img')[0];            bgImg.width = (w );            bgImg.height = (h );        }    </script></head><body><div id="zxdlbg">    <img src="images/dlbg.jpg"/></div></body></html>

0 0