Fit the length and width of the image with the screen, larger size / c# unity

Question

I have a script to download an image I want the image height and width to match the screen

img [1]: https://i.sstatic.net/0VcAT.png

The image should be in the best view to the user By the way, it's an app for watching manga

" I tried very hard to convey the idea in the best way, and I hope I succeeded ^_^ "

Thanks for the help

The Script

public IEnumerator GetImage(string url)
{
    UnityWebRequest www = UnityWebRequestTexture.GetTexture(url);
    yield return www.SendWebRequest();

    Texture2D myTexture = DownloadHandlerTexture.GetContent(www);


    //خوارزمية تعديل حجم الصورة 
    // Give all 100 of the length or width one number
   for(int i = 1; i < 40;)
   {
       if(i*100 > myTexture.width)
       {
           for(int u = 1; u < 40;)
           {
              if(u*100 > myTexture.height)
              {
                WidthX = i;
                HeightX = u;
                u = 100;
                i = 100;
              } 
               u++;
           }
       }
       i++;
   }

    // After reducing all 100 to one, scale it down to fit the screen
    WidthX = WidthX / 3;
    HeightX = HeightX / 3;

    //Create sprite and set a Width and Height
    Rect rec = new Rect(0, 0, myTexture.width, myTexture.height);
    OImg.sprite = Sprite.Create(myTexture, rec,  Vector2.zero);
    OImg.GetComponent<RectTransform>().localScale = new Vector3 (WidthX,HeightX,1);        
    

}

I changed the size of the image by (localScale) and I think this is a mistake

must be modified " Rect Transform Width And Height " for Image

Answer 1

As you are using RecTransform and localScale, you are using either a RawImage or Image to display this texture. Instead of trying to resize it, just use anchors.

As they appear in the inspector in a little box with some arrows, it is easier to form them there. Do you ever want this image to not take up the full screen? If you want it to always take up the full screen, I can add a solution for that, but here is a code solution that will force your Image or RawImage to take up the full screen regardless of the image it is given.

[SerializeField] private Transform CanvasTransform = null;

private RectTransform OImgRect = null;

private void Start()
{
    OImgRect = OImg.GetComponent<RectTransform>();
}

public IEnumerator GetImage(string url)
{
    ...   
    
    // set your image 
    OImg.sprite = Sprite.Create(myTexture, rec,  Vector2.zero);
    
    // set our parent to the canvas while storing our previous parent
    Transform prevParent = transform.parent;
    
    // set the new parent to the canvas
    transform.SetParent(CanvasTransform, false);
    
    // fit it to screen
    FitToImageToScreen();
    
    // now set it back but using the true parameter to keep our scaling
    transform.SetParent(prevParent, true);
}

private void FitToImageToScreen()
{
    OImgRect.anchorMin = new Vector2(0, 0);
    OImgRect.anchorMax = new Vector2(1, 1);
    OImgRect.pivot = new Vector2(0.5f, 0.5f);   
}

Remove all other code where you are trying to fit it to the screen. Just use anchors. If you would like sources on the fields I am using, there is anchorMin, anchorMax and pivot. They are normalized values [-1,1] that described how the image will fit to its parent container. As long as your Canvas component fits your screen and the Image or RawImage of OIImg is a direct child of it, the image will expand to the Canvas.