缩小图像以适合div

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

这是我超出我的深度，下面加载的图像是662×599。 宽度大于允许的最大值，因此我需要它正确缩小并放置在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 = 'https://stackoverflow.com/questions/16638743/scale-down-image-to-fit-div/files.jpg'; 

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

任何帮助都会非常感谢。

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 

Answer 2

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

http://jsfiddle.net/Pp7Rg/1/

 
  
 div { width: 500px; } img { max-width: 100%; }