<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>图片中心点全屏缩放代码</title> <script type="text/javascript" src="http://i1.sinaimg.cn/jslib/jquery-1.4.2.min.js"></script> <style> body {padding:0; margin:0;} #coverpage{ width: 100%; height: 100%; z-index: 9999; background: #000; overflow: hidden; position: absolute;} #onepics{ width: 100%; height: 100%; overflow: hidden; position: relative;} .onepic_wrap{ width: 100%; height: 100%; overflow: hidden; display: block; position: relative; cursor: pointer;} .onepic_bg{ position: absolute; left: 0; bottom: 0; height: 45px;width: 100%;color:#fff;background:rgba(0,0,0, 0.5); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7f000000', EndColorStr='#7f000000');*zoom:1;} :root .onepic_bg{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000'); } .onepic_bg p{ height: 45px; line-height: 45px; padding-left: 95px; font-size: 13px; color: #fff; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} </style> </head> <body> <!-- cover begin --> <div id="coverpage"> <div id="onepics"><div class="onepic_wrap"><img src="http://www.sinaimg.cn/dy/slidenews/1_ori/2014_38/43407_480207_848972.jpg" class="wrap_pic"></div></div> <!-- 文字介绍 start --> <div class="onepic_bg"> <p id="onepic_sum">居民被迫撤离，主要州际高速路关闭。摄影：Darvi</p> </div> <!-- 文字介绍 end --> </div> <script type="text/javascript"> var win_height; //浏览器当前窗口可视区域高度 var win_width; //浏览器当前窗口可视区域宽度 var original_width = 2100; //图片原始尺寸，编辑可手填 var original_height = 1000; //图片原始尺寸，编辑可手填 var pic_width, pic_height, pic_left, pic_top; //裁剪适配后的图片显示尺寸和左边距、上边距 OnePicAction(); function OnePicAction() { win_height = $(window).height(); //浏览器当前窗口可视区域高度 win_width = $(window).width(); //浏览器当前窗口可视区域宽度 //裁剪图片 if (Math.ceil(win_height * original_width / original_height) < win_width) { pic_width = win_width; pic_height = Math.ceil(win_width * original_height / original_width); pic_left = 0; pic_top = -Math.ceil((pic_height - win_height) / 2); } else { pic_height = win_height; pic_width = Math.ceil(win_height * original_width / original_height); pic_left = -Math.ceil((pic_width - win_width) / 2); pic_top = 0; } $("#onepics .wrap_pic").css("width", pic_width + "px").css("height", pic_height + "px").css("margin-top", pic_top + "px").css("margin-left", pic_left + "px"); } //浏览器大小变化时壹图处理 window.onresize = function() { OnePicAction(); } </script> </body> </html>