缩小图像以适合div

Question

我试图缩小一个inage以适合一个大于最大宽度和高度设置的div容器.我有下面的代码,它获取图像的宽度和高度以及允许的最大尺寸.

这是我超出我的深度,它下面加载的图像是662x599.宽度大于允许的最大值,所以我需要它正确缩小并放入div的中心.

var max_width = 713;
var max_height = 550;

var img = new Image();
img.onload = function() {
    img.width = this.width;
    img.height = this.height;
}
img.src = 'files.jpg';

下面是一个示例,我手动调整图像的大小,看起来很好,给你一个粗略的例子,它应该看起来应该如何.我打算使用样式"top"和"left"将图像放在div的中心.

<img style="width: 613px; height: 550px; top: 0px; left: 50px;" src="files.jpg">

任何帮助都会非常感谢.

Answer 1

这是代码来计算width,height,top,left.

// max_width  = 713
// max_height = 550
// img.width  = 662
// img.height = 599

scale_width = max_width / img.width;
scale_height = max_height / img.height;

scale = Math.min(scale_width, scale_height);

width = img.width * scale;  // 608
height = img.height * scale;  // 550

left = (max_width - width)/2; // 52
top = (max_height - height)/2;  // 0