js 自动缩放图片居中

最新推荐文章于 2021-07-03 02:06:43 发布

原创最新推荐文章于 2021-07-03 02:06:43 发布 · 835 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

该代码段提供了一个JavaScript函数AutoResizeImage，用于根据最大宽度和高度限制自动缩放图片，并保持居中显示。函数首先创建一个Image对象预加载图片，然后计算缩放比例，确保图片不超过指定的最大尺寸。如果纵横比都小于1，会选择较小的比例进行缩放。最后，调整图片的样式，包括高度、宽度、垂直和水平居中对齐。

// 缩放图片，imgSrc用户延迟加载图片url
function AutoResizeImage(maxWidth,maxHeight,objImg,imgSrc){
var img = new Image();
img.src = imgSrc || 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.style.height = Math.round(h) + "px";
objImg.style.width = Math.round(w) + "px";

if(h < maxHeight) { // 纵向有空余空间
objImg.style.marginTop = Math.round((maxHeight - h) / 2) + "px";
}
if(w < maxWidth) { // 横向有空余空间
objImg.style.marginLeft = Math.round((maxWidth - w) / 2) + "px";
}
if(!!!objImg.src)
objImg.src = imgSrc;
}