Home  >  Article  >  Web Front-end  >  js scale images proportionally

js scale images proportionally

大家讲道理
大家讲道理Original
2016-11-10 13:24:061197browse

//第一个参数是当前对象this,第二个是宽,第三个是高
 
function datuIMG(datu,kuan,chang){
datu.width = kuan*100;
datu.height = chang*100;
//图片等比例缩小
if(datu.width*chang>datu.height*kuan){
datu.width=kuan;
datu.height=(kuan*chang)/kuan;
}
else{ 
datu.width=(chang*kuan)/chang;
datu.height=chang;
}
//图片居中显示
//图片宽小于设定的边框宽
if(datu.width<=kuan){
var kk = parseInt((kuan-datu.width)/2);
datu.style.paddingRight = kk + "px";
datu.style.paddingLeft = kk + "px";
}
//图片高小于设定的边框高
if(datu.height<=chang){
var gg = parseInt((chang-datu.height)/2);
datu.style.paddingTop = gg + "px";
datu.style.paddingBottom = gg + "px";
}
 
}
 
 
//使用
 
在img上写onload事件  onload=" datuIMG(this,100,80)"
 
 
最终的效果就会将无论多大的图片 等比缩放成 100*80

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn