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.

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.

• javascript
• jquery
• css

• @undefined I am editing an existing js image slider and want to over write any css applied to it. – arbme Commented May 19, 2013 at 19:52
• You tagged your post jQuery, but you didn't post any jQuery. Is this correct? – Mooseman Commented May 19, 2013 at 20:03
• Why wouldn't you just set the width to 100%? – Rich Bradshaw Commented May 19, 2013 at 20:04
• @RichBradshaw What if image is smaller then max sizes would that not stretch the image? – arbme Commented May 19, 2013 at 20:21
• @Mooseman JS or jQuery. – arbme Commented May 19, 2013 at 20:21

2 Answers 2

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

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

http://jsfiddle/Pp7Rg/1/

<div>
    <img src="https://www.google./url?q=http://www.photoinpixel./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%;
}