您的位置：首页 > 其它

加载到图片之后，对图片进行等比例填充缩放 分类： 图片等比缩放 加载图片后缩放 图片缩放 2014-04-22 10:41 312人阅读 评论(0) 收藏

2014-04-22 10:41 531 查看 
<!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>Reset Picture Size</title>
<style type="text/css">
html,body,div,img{
margin:0;
padding:0;
border:0;
}
.wrapper {
height: 500px;
width: 1000px;
margin:0 auto;
}
.pic_box{
margin:30px auto;
height:100px;//高度，需要和js中设置的高度target_h一致
width:200px;//宽度，需要和js中设置的宽度target_w一致
overflow:hidden;//隐藏多余的部分
position:relative;
}
.pic_box img{
position:absolute;//需要用到绝对定位
}
</style>
</head>

<body>
<div class="wrapper">
<div class="pic_box">
<img id="J_pic" />
</div>
</div>
</body>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#J_pic').attr({'src':'test_pic/pic1.jpg','onerror':'img_error();'});//动态加载图片地址，onerror在图片加载不到的时候选用默认图
reset_pic_size();//重新设置图片大小和位置
});
var target_w = 200;
var target_h = 100;

function reset_pic_size(){
var originImage = new Image();
originImage.src = $('#J_pic').attr('src');//获取原始图片
if( originImage.complete ){
var pic_origin_w = originImage.width;//图片原始宽度
var pic_origin_h = originImage.height;//图片原始高度
reload_pic(pic_origin_w,pic_origin_h);//重新设定加载图片
}else{
originImage.onload = function(){
var pic_origin_w = originImage.width;
var pic_origin_h = originImage.height;
reload_pic(pic_origin_w,pic_origin_h);
};
}
}

function reload_pic(width,height){
var pic_origin_w = width;//原始宽度
var pic_origin_h = height;//原始高度
var pic_scale;//最终选用的缩放比例
var pic_new_w, pic_new_h;//图片新的宽高
var pic_top, pic_left;//图片定位用的left和top值
var pic_w_scale = target_w/pic_origin_w;
var pic_h_scale = target_h/pic_origin_h;
if( pic_w_scale > pic_h_scale ){//如果宽度比比高度比的比值大，说明需要按照宽度的比例进行缩放
pic_scale = pic_w_scale;
pic_new_h = pic_scale * pic_origin_h;
pic_new_w = target_w;
pic_left = 0;
pic_top = (pic_new_h-target_h)/2;
}else{//如果宽度比比高度比的比值小，说明需要按照高度的比例进行缩放
pic_scale = pic_h_scale;
pic_new_w = pic_scale * pic_origin_w;
pic_new_h = target_h;
pic_top = 0;
pic_left = (pic_new_w-target_w)/2;
}
$('#J_pic').css({'height':pic_new_h+'px','width':pic_new_w+'px','top':'-'+pic_top+'px','left':'-'+pic_left+'px'}).show();
}

function img_error(){
$('#J_pic').attr('src','test_pic/default.png');
reset_pic_size();
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航