1、编写HTML的样式：<style>*{margin:0 ;padding:0}.fullimg{background: url(timg.jpg) center center no-repeat;background-size:100% 100%}.fullimg1{background: url(logo.jpg) center center no-repeat;background-size:100% 100%}</style>这里有两幅图像分别作为div的背景，图像水平和垂直居中，宽高覆盖其div容器的全部，即宽高完全显示，所以图像为适应容器而会变形。
2、编写HTML的内容<div class="fullimg" id="fullimg"></div><div class="fullimg1" id="fullimg1"></div>样式fullimg和fullimg1在上文已经规定样式，覆盖其div的全部，但div没有规定样式，div默认宽度为100%,宽度已经满屏，只需设定div的高度=浏览器窗口高度即可，这个过程使用下步的JS或JQuery，若使用js，需在div中指定id=""，而JQuery则不需要添加
3、首先使用js，争犸禀淫<script>var fullimg = function(){var wh=window.innerHeight;var fullimg=win颊俄岿髭dow.document.getElementById("fullimg");var fullimg1=window.document.getElementById("fullimg1");fullimg.style.height=wh;fullimg1.style.height=wh;}fullimg()</script>这段规定了一个名为fullimg的过程，最后的fullimg()则是调用此过程。var wh=window.innerHeight; 获取浏览器窗口的高度。var fullimg=window.document.getElementById("fullimg"); 获取ID为fullimg的元素；fullimg.style.height=wh; 设置fullimg样式中高度=浏览器高度。最后调用此过程，完成div高度=浏览器高度。
4、换成j兑恶铼融Query:<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.枣娣空郅js"></script><script>var fullimg=function(){var wh=window.innerHeight;$('.fullimg').height(wh);$('.fullimg1').height(wh);}fullimg()</script>使用jQuery得加载jQuery，也同样建立一个名为fullimg的过程var wh=window.innerHeight; 这是js语法，获取浏览器窗口高度。$('.fullimg').height(wh); jQuery语法，设置fullimg类的高度等于浏览器窗口高度。最后调用fullimg()
5、此时打开后图像占用了整个屏幕，但浏览器缩放或增大时，图像不会跟随变化，而jQuery的resize方法则为浏览器缩放时的过程，故在resize中调用fullimg ()过程，使div高度等于浏览器高度。$(window).resize (function(){ fullimg() });
