Home/ Questions/Q 6670045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T03:13:20+00:00

I am trying to resize an image based off of a max-width/max-height array. Here’s

  • 0

I am trying to resize an image based off of a max-width/max-height array. Here’s what I’ve come up with so far:

<html>
<head>
    <title>Image resize test</title>
    <script>
        function createImage(){
            //The max-width/max-height
            var maxDim = [500,500];
            //Create the image
            var img = document.createElement("img");
            img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png");
            document.body.appendChild(img);
            //Function for resizing an image
            function resize(){
                //resize the image
                var portrait = this.width < this.height;
                this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0];
                //What is the height? PROBLEM HERE!!!
                console.log(this.height);
            }
            //Is the image loaded already?
            var temp = new Image();
            temp.src = img.src;
            var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0;
            //Fire the resize function
            if (loaded) resize.call(img);
            else img.addEventListener("load",resize,false);
        }
    </script>
</head>
<body onload="createImage()">
</body>
</html>

You should be able to run this file as-is. It is able to get the width/height after loading the image. But once you alter the width, it still logs the old height. The only browser that works correctly appears to be Firefox (newer versions). All the other browsers don’t update the height attribute until the window is finished loading.

Does anyone know a fix for this? The image is already loaded, but it isn’t giving the correct resized dimensions.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You didn’t change the height yet, because your image’s height > width, make portrait = false;

    When you change the width, in IE8, it will only resize the width, but in chrome it will both change the width and height, I think this is browser depended.

    You can fix this by both change the height and with manually.

    • 0