Scale down image to fit div

Question

I am trying to scale down an inage to fit a div container that are greater then the max width and heights set. I have the code below that gets the width and height of the image and the sets max sizes allowed.

This is were I'm out of my depth, the image it loads below is 662x599. The width is greater the the max allowed so I need it to scale down correctly and be placed into the center of the 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';

Below is an example me resizing the image manually that looks good to give you a rough example of how it should look should. I intent to use styles "top" and "left" to place the image in the center of the div.

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

Any help would be great thanks.

Answer 1

This is code to calculate 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

Why do you even need JavaScript? Just set the max-width on the image to match that of the containing div (ie, 100%).

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

<div>
    <img src="https://www.google.com/url?q=http://www.photoinpixel.com/mypicture/persian-cat-hd-wallpaper.jpg&ei=dTWZUYHKOoqkiQLto4GYAw&sa=X&oi=unauthorizedredirect&ct=targetlink&ust=1368996989961871&usg=AFQjCNHdsjijJ2oeKrUuvZRMFUuIRxydtg"/>
</div>

div {
    width: 500px;
}

img {
    max-width: 100%;
}