SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the Width and Height of an Image Object?

    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.

    HTML Code:
    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. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    The question is why do you want to change the image?

    If it is for responsive purpose just use %.
    I Love coding...
    Don't click this link.

  3. #3
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    <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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

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

    Code JavaScript:
    img.width = ...
    img.heigh = ...

    For example:

    Code JavaScript:
    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. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •