js 自动缩放图片居中

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

boolbo

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

阅读量766

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/boolbo/article/details/53885469

版权

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

摘要由CSDN通过智能技术生成

// 缩放图片，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