加载到图片之后，对图片进行等比例填充缩放

最新推荐文章于 2022-02-15 15:22:30 发布

snow_finland

最新推荐文章于 2022-02-15 15:22:30 发布

阅读量1.5k

点赞数

分类专栏：图片等比缩放加载图片后缩放图片缩放文章标签：图片等比缩放加载图片后缩放图片缩放 javascript js

本文链接：https://blog.csdn.net/snow_finland/article/details/24294819

版权

加载图片后缩放同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

图片缩放

1 篇文章 0 订阅

订阅专栏

图片等比缩放

0 篇文章 0 订阅

订阅专栏

<!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>

snow_finland

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
加载到图片之后，对图片进行等比例填充缩放

Reset Picture Sizehtml,body,div,img{ margin:0; padding:0; border:0;}.wrapper { height: 500px; width: 1000px; margin:0 auto;}.pic_box{ margin:30px auto; height:100px; width:200px; overf
复制链接

扫一扫