Javascript 缩小图像以适应div

我试图缩小一个尺寸，以适合大于设置的最大宽度和高度的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';

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

下面是一个手动调整图像大小的示例，它看起来不错，可以为您提供一个大致的图像大小示例。我打算使用样式“top”和“left”将图像放置在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';

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

---

任何帮助都将非常感谢。

这是计算

宽度
，
高度
，
顶部
，
左侧

// 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

这是计算
宽度
，
高度
，
顶部
，
左侧
的代码

// 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

为什么你甚至需要JavaScript？只需在图像上设置
max width
，以匹配包含
div
的图像（即100%）



div{
宽度：500px；
}
img{
最大宽度：100%；
}
为什么您甚至需要JavaScript？只需在图像上设置
max width
，以匹配包含
div
的图像（即100%）



div{
宽度：500px；
}
img{
最大宽度：100%；
}
@undefined我正在编辑一个现有的js图像滑块，希望覆盖应用于它的任何css。你标记了你发布的jQuery，但没有发布任何jQuery。这是正确的吗？为什么不将宽度设置为100%？@RichBradshaw如果图像较小，那么最大尺寸不会拉伸图像呢？@Mooseman JS或jQuery。@未定义我正在编辑一个现有的JS图像滑块，并希望覆盖应用于它的任何css。你标记了你发布的jQuery，但没有发布任何jQuery。这是正确的吗？你为什么不将宽度设置为100%？@RichBradshaw如果图像较小，那么最大尺寸不会拉伸图像呢？@Mooseman JS或jQuery。感谢我所做的。顺便说一句：这段代码也增加了太小的图像，并保持了原始的纵横比。谢谢我所做的。顺便说一句：这段代码也增加了太小图像并保持原始纵横比。