html按比例缩放 居中,JS控制图片按比例缩放并不超过一定宽度和高度（居中对齐）...

//JS控制图片按比例缩放并不超过一定宽度和高度(两种方法，在此使用第二种)

function Wa_SetImgAutoSize(obj) {

//var img=document.all.img1;//获取图片

var img = obj;

var MaxWidth = 630; //设置图片宽度界限

var MaxHeight = 360; //设置图片高度界限

var HeightWidth = img.offsetHeight / img.offsetWidth; //设置高宽比

var WidthHeight = img.offsetWidth / img.offsetHeight; //设置宽高比

if (img.readyState != "complete") return false; //确保图片完全加载

if (img.offsetWidth > MaxWidth) {

img.width = MaxWidth;

img.height = MaxWidth * HeightWidth;

}

if (img.offsetHeight > MaxHeight) {

img.height = MaxHeight;

img.width = MaxHeight * WidthHeight;

}

}

//调用：

//图片按比例缩放

var flag = false;

function DrawImage(ImgD) {

var image = new Image();

var iwidth = 630;            //定义允许图片宽度，当宽度大于这个值时等比例缩小

var iheight = 360;            //定义允许图片高度，当宽度大于这个值时等比例缩小

var minwidth=iwidth*0.7;//图片最小宽度小于定义百分比；

var minheight=iheight*0.7;//图片最小高度小于定义百分比

image.src = ImgD.src;

if (image.width > 0 && image.height > 0) {         //假如图片长宽都不为零

flag = true;

if (image.height / image.width >= iheight / iwidth) {       //通过正弦值判断图片缩放后是否偏高

if (image.height > iheight) {        //如果图片比设定的要高

ImgD.height = iheight;

ImgD.width = (image.width * iheight) / image.height;

} else {

ImgD.width = image.width;

ImgD.height = image.height;

//假如图片width<70%(设定)&&heitht<70%(设定)

if ( image.height < minheight) {

ImgD.height = minheight;

ImgD.width = (image.width * minheight) / image.height;

}

}

ImgD.alt = image.width + "×" + image.height;

}

else {           //如果图片比例 小于 设定的比例

if (image.width > iwidth) {

ImgD.width = iwidth;

ImgD.height = (image.height * iwidth) / image.width;

} else {

ImgD.width = image.width;

ImgD.height = image.height;

//假如图片width<70%(设定)&&heitht<70%(设定)

if (image.width <= minwidth ) {

ImgD.width = minwidth;

ImgD.height = (image.height * minwidth) / image.width;

}

}

ImgD.alt = image.width + "×" + image.height;

}

}

}

//调用：

--------------css

.proleft{float:left;

width: 630px;

height: 360px;

overflow: hidden;

display: table-cell;

text-align: center;

vertical-align: middle;

}

.proleft span {

display: inline-block;

vertical-align: middle;

height: 100%;

}

.proleft img

{

vertical-align: middle;

max-width: 630px;

max-height: 360px;

}

---------------html文本