最近我参与了一个网页项目,需要处理和在网页上显示大量的图像,我们知道最终用户上传的图像的宽度和高度无法轻松控制,并且很难显示。起初,我尝试放大/缩小图像以找到合适的演示文稿,并且成功了,但是我的老板仍然对我的解决方案不满意,以下是我的方式:
var autoResizeImage = function(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
img.onload = function() {
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;
}
w = w <= 0 ? 250 : w;
h = h <= 0 ? 370 : h;
objImg.height = h;
objImg.width = w;
};
};
这种方式只是为了限制图像的最大宽度和高度,以便相册中的每张图像仍然具有不同的宽度和高度,这仍然非常紧迫。
而此时此刻,我知道我们可以创建一个DIV并将图像用作它的背景图像,这种方式太复杂而且不直接我不想采用。所以我想知道是否有更好的方法来显示具有固定宽度和高度的图像而不会出现呈现失真?
谢谢。