做相册功能的时候经常会碰到这样一个问题，就是用户上传的照片尺寸，比例是很不固定的，如果是大图片经常会把页面撑开，即使你用了等比缩放。也要等图片加载完成，这是非常折磨人的。

?这是一段网上找的代码，在Body标签中加入onload=”ReImgSize”进行调用：

[code=”javascript”]

?function ReImgSize() {
var await = document.getElementById(“Imgbox”); //定义要改变的图片的容器ID
var imgall = await.getElementsByTagName(“img”); //取得容器内所有的IMG标签
for (i = 0; i < imgall.length; i++) { if (imgall[i].width > 500) //如果图片的宽度大于500
{
var oWidth = imgall[i].width; //取得图片的实际宽度
var oHeight = imgall[i].height; //取得图片的实际高度
imgall[i].width = “500”; //重设图片的宽度为500
imgall[i].height = oHeight * 500 / oWidth; //重设图片的高度
}
}
}[/code]

但是这里仍有很多不人性的地方，碰到大图片的时候，加载是非常折磨人的事情。
(转载请注明出处：万博manbetx平台 https://www.762w6o.com/)

这里找了一个jquery的LoadImage插件，自己做了少许的修改：

这个JQ插件的代码

[code=”javascript”]

/*
///来源
///参数设置：
scaling???? 是否等比例自动缩放
width?????? 图片最大高
height????? 图片最大宽
loadpic???? 加载中的图片路径
*/
(function($) {
jQuery.fn.LoadImage = function(settings) {
settings = jQuery.extend({
scaling: true,
width: 500,
height: 500,
loadpic: “”
},
settings);
return this.each(function() {
$.fn.LoadImage.Showimg($(this), settings);
});
};
$.fn.LoadImage.Showimg = function($this, settings) {
var src = $this.attr(“src”);
var img = new Image();
img.src = src;
var autoScaling = function() {
if (settings.scaling) {
if (img.width > 0 && img.height > 0) {
if (img.width / img.height >= settings.width / settings.height) {
if (img.width > settings.width) {
$this.width(settings.width);
$this.height((img.height * settings.width) / img.width);
}
else {
$this.width(img.width);
$this.height(img.height);
}
}
else {
if (img.height > settings.height) {
$this.height(settings.height);
$this.width((img.width * settings.height) / img.height);
}
else {
$this.width(img.width);
$this.height(img.height);
}
}
}
}
}
$this.attr(“src”, “”);
var loading = $(““);
$this.hide();
$this.after(loading);
$(img).load(function() {
autoScaling();
loading.remove();
$this.attr(“src”, this.src);
$this.show();

});
}
})(jQuery);[/code]

这个是调用的方法：

[code=”javascript”]

$(function(){
?$(“img”).LoadImage({scaling : true,
???width : 500,
???height : 200,
???loadpic:”loading.gif”});
});[/code]

查看demo：https://www.762w6o.com/demo/jQuery/LoadImage/demo.htm
(转载请注明出处：万博manbetx平台 https://www.762w6o.com/)

另：其实如果没有IE6我们直接可以使用一个css属性就可以搞定这些复杂的工作，那就是max-width；

例如：img{max-width:500px;}