Changing the Width and Height of an Image Object?

JavaScript
1

In this scenario after creating an image object and determining the width and height, how can I then change the width and height of the image object? I would already know the window dimensions so I need to resize the image accordingly. I am already using jQuery on the page if there is a jQuery-based solution but it seems to be straight JS to me. img.width = doesn’t work and I have been searching for an answer and so far I can’t locate one. Any help will be greatly appreciated.

img = new Image();
img.src = 'http://pathtoimage.png';
// Execute code after image loads
img.onload = function() {
    // Assign image's width, height to vars
    var img_width = img.width;
    var img_height = img.height;
}
2

The question is why do you want to change the image?

If it is for responsive purpose just use %.

3

Rather than pre-loading your image object try putting it into the page and then access it using its id. Here is a short script that changes the image size from 100 x 100 to 200 x 200. You will need to provide your own image to try this out.

<body>

<img id="img2" border="0" src="B1.jpg" width="100" height="100">
<script type="text/javascript">
 var img2Obj=document.getElementById("img2");
 img2Obj.width=200;
 img2Obj.height=200;
</script>

</body>
4

Hi,

You can set the images dimensions in the same way as you get them:

img.width = ...
img.heigh = ...

For example:

img = new Image();
img.src = 'http://biblioklept.files.wordpress.com/2007/12/lolcat.jpg%3Fw%3D890';

img.onload = function() {
  var img_width = img.width;
  var img_height = img.height;

  console.log("Original width: " + img_width + "px")
  console.log("Original height: " + img_height + "px")
  img.width = img_width/2
  img.height = img_height/2
  document.body.appendChild(img);
}
5

Thanks for all the replies. I wanted to keep my initial post as simple as possible so I omitted the bigger picture. The bottom line is that I solved my issue but if anyone is interested, here are the details.

I have a page with links to graphics and each one launches a jQuery ColorBox modal window. Since the images vary in size, if the height or width of the image exceeds the current window dimensions (- xx pixels) it needs to be resized and the window adjusted accordingly so that there are no scroll bars so the entire image is visible. The links to the graphics are not direct links to the files on the file system, but rather reference a file downloads page that delivers the file to the iframe when Colorbox opens the new window.

parent.$.colorbox({href:'file_download.php?filetype=gprev&file=' + id, iframe:true, width: '96%', height: '96%', scalePhotos: true, onComplete: function() {

The root of my problem was trying to find a jQuery selector that would work from the parent page to the img in the iframe so I could change the width/height. The image in the iframe had no id or class because it was being delivered via a dedicated file downloads page and not straight from the file system. Since there would always be just one image in the iframe, I could simply use this selector since the img has no id or class to use as a shorter selector.

// Locate the lone image in the iframe and change the width
$(‘iframe’).contents().find(‘img’).attr(‘width’, imageWidth);

6

Hi,

I’m glad you got your problem sorted.
Thanks for taking the time to report back, maybe this’ll help someone else.