Skip to main content
Known Participant
April 16, 2018
Question

Image Component stretching the src image!

  • April 16, 2018
  • 1 reply
  • 297 views

How do I prevent the image component from distorting/stretching images that load into as a source. I need a static image component and I am changing the source dynamically. It all works fine, except the images are distorting to the size of the component, i.e., landscape images are getting squeezed if I make the component portrait....likewise, portrait images are getting stretched when I make the component landscape! Any way to make the loaded image load proportionally regardless of the initial width and height of the component?

    This topic has been closed for replies.

    1 reply

    khussieAuthor
    Known Participant
    April 16, 2018

    I may have answered my own question. I was able to apply a css style. It seems to be working now:

        document.getElementById("myImage").style.width="90%";

        document.getElementById("myImage").style.height= "auto";

    Colin Holgate
    Inspiring
    April 16, 2018

    That currently doesn't work for me. Can you show a few more lines of code, enough that anyone could reproduce the fix?

    khussieAuthor
    Known Participant
    April 16, 2018

    Hmmm. Not sure what else to show. I find Animate to be VERY difficult to find rhyme or reason as to when something can be styled with a css style or not. I also find it extremely difficult as to how to target an instance Sometimes I can do it with "this.movieclip" Sometimes I have to target with "exportRoot.moviclip". This program needs some major consistency and documentation.

    Here is my function which swaps the image (the image component is manually placed on the stage. :

    function showBigImage(e){

         this.myImage.src = "";

    //imgSrc[] refers to an array which holds all of my image source paths

    //When calling this function, e is a number to reference in the array.

         this.myImage.src = imgSrc;

         exportRoot.myImage.x = 100;

         exportRoot.myImage.y = 65;

         document.getElementById("myImage").style.width="75%";

         document.getElementById("myImage").style.height= "auto";

    }