<!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="data:images/header.png" 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>
jquery我单独拿出来吧
<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>
最后是我自己写的，有类似，但是判断条件有不同，还有，如果自己没定原始参数，而是通过js获取图片宽度，就可能出现问题，图片只是按比例显示，但是不全屏
<script>
function fullScreen(pic,p_w,p_h){
var f_w,f_h;//全屏图片尺寸
var w_h = $(window).height();
var w_w = $(window).width();
var $this = $(pic);
// var p_w = $this.width();//这个没用？？？？？？？？？？？？？？？？
// var p_h =$this.height();
if(p_w < p_h){//如果图片高度大于宽度
f_w = w_w;
f_h = Math.ceil(p_h / p_w * w_h);
f_ml = 0;
f_mt = -(f_h-w_h)/2;
$this.css({'width':f_w+'px','height':f_h+'px','margin-top':f_mt+'px','margin-left':f_ml+'px'})
}else{ //宽度大于高度
f_h = w_h;//因为图片宽度比高度值大，所以就以屏幕的高度为基准，屏幕的宽度就是图片的高度
f_w = Math.ceil(p_w / p_h * f_h);//p_w/p_h就是图片的宽高比例，当确定了图片的高度的时候，就可以通过宽高比例来确定全屏后的图片宽度
f_mt = 0;//图片的上边距
f_ml = -(f_w-w_w)/2;//图片全屏后的宽度超过屏幕的宽度除以2，就是所需往左偏移的距离
$this.css({'width':f_w+'px','height':f_h+'px','margin-top':f_mt+'px','margin-left':f_ml+'px'})
}}
fullScreen('#onepics .wrap_pic',1920,760);
window.onresize = function(){
fullScreen('#onepics .wrap_pic ')}
</script>
