Javascript + Asp.net 让图片自动成比例缩放

本文介绍了一种使用JavaScript实现图片自适应显示的方法，包括调整图片大小和位置以适应不同尺寸的容器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让图片自适应，在开发项目经常会碰到。之前更多的是使用.Net后台来控制。最近有个项目等项目几乎全部完工了才提出这样的要求。
于是想了很多办法，最后用Javascript为主来实现。闲话不说，步骤主要如下

1. 创建 myFunctions.js

//=======================Begin

// JavaScript Document
function AutoResizeImage(maxWidth,maxHeight,objImg){
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var Ratio = 1;
var w = img.width;
var h = img.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth ==0 && maxHeight==0){
Ratio = 1;
}else if (maxWidth==0){//
if (hRatio<1) Ratio = hRatio;
}else if (maxHeight==0){
if (wRatio<1) Ratio = wRatio;
}else if (wRatio<1 || hRatio<1){
Ratio = (wRatio<=hRatio?wRatio:hRatio);
}
if (Ratio<1){
w = w * Ratio;
h = h * Ratio;
}
objImg.height = h;
objImg.width = w;
}


 function centerImage(imgD, maxWidth, maxHeight){
        var div = imgD.parentNode;//获取包含本图片的div
        if(imgD.height < maxHeight){
            var top = (maxHeight - imgD.height) / 2;
            div.style.marginTop = top + "px";
        }
        if(imgD.width < maxWidth){
            var left = (maxWidth - imgD.width) / 2;
            div.style.marginLeft = left + "px";
        }
    }

//===================End

2. 在XXX.aspx 页面中使用

a) 前台页面引入

b) 后台页面中

page_load(...)

{

imgNewsId.Attributes.Add("onload"," AutoResizeImage(212,142,this);centerImage(this, 212,142)");

//AutoResizeImage(212,142,this) // 按照w/h:212,142成比例缩放

//centerImage 位于Div层的水平，垂直居中

}

补充: 其实理论上直接在前台，在<img >中 <img onload=""> 就可以了