.NET MAUI Image wrong size

I'm having a problem when I show an image on .NET MAUI, the size of the image is always bigger than it actually is (blue part in the image below).

My code is as follows:

<Grid>
    <ScrollView>
        <VerticalStackLayout>
            <Image Source="https://cdn-5e5150f5f911c807c41ebdc8.closte.com/wp-content/uploads/IoT-development-kit-article-banner-scaled-900x400.jpg"
                    Aspect="AspectFit" BackgroundColor="Blue">
                <Image.Margin>
                    <OnIdiom Phone="10" Tablet="20" Desktop="20"/>
                </Image.Margin>
            </Image>
        </VerticalStackLayout>
    </ScrollView>
</Grid>

Is there a way to keep the size of the image in proportion to the actual size?

I made some changes:

1. I tried using data binding in MVVM way.
2. I tried counting image ratio using platform code.

The following is my code,

For MainPage.xaml, the difference is that i use data binding for image Source and AspectRatio property which would be claimed in MainPageVeiwModel.

<Grid>
    <ScrollView>
        <VerticalStackLayout>                          
            <a:AspectImage Source="{Binding ImageUrl}"
                     AspectRatio="{Binding AspectRatio}" Aspect="AspectFit" BackgroundColor="Blue">
                <a:AspectImage.Margin>
                    <OnIdiom Phone="10" Tablet="20" Desktop="20"/>
                </a:AspectImage.Margin>
            </a:AspectImage>
        </VerticalStackLayout>
    </ScrollView>
</Grid>

For custom control AspectImage, the difference is that I changed AspectRatio to Bindable property as we use binding for this property. More info Bindable properties.

public class AspectImage : Image
{
    public static readonly BindableProperty AspectRatioProperty = BindableProperty.Create("AspectRatio", typeof(double), typeof(AspectRatioContainer), null);

    public double AspectRatio
    {
        get { return (double)GetValue(AspectRatioProperty); }
        set { SetValue(AspectRatioProperty, value); }
    }

    public AspectImage()
    {
        SizeChanged += HandleSizeChanged;
    }

    private void HandleSizeChanged(object sender, EventArgs e)
    {
        if (this.Width > 0 && AspectRatio > 0)
        {
            var desiredHeightRequest = this.Width * AspectRatio;
            if ((int)desiredHeightRequest != (int)HeightRequest)
            {
                this.HeightRequest = (int)desiredHeightRequest;
                InvalidateMeasure();
            }
        }
    }
}

For MainPageViewModel, we add AspectRatio and ImageUrl property for custom control and count AspectRatio.

public class MainPageViewModel
{
	public string ImageUrl { get; set; }
	public double AspectRatio { get; set; }

	public MainPageViewModel()
	{
		ImageUrl = "https://cdn-5e5150f5f911c807c41ebdc8.closte.com/wp-content/uploads/IoT-development-kit-article-banner-scaled-900x400.jpg";

		AspectRatio = CountAspectRatio(ImageUrl);
    }

    private double CountAspectRatio(string imageUrl)
    {
        var service = new GetImageSizeService();
		Size imageSize = service.GetImageSize(imageUrl);
		return imageSize.Height / imageSize.Width;
    }
}

From above code in MainPageViewModel, we count AspectRatio by call platform code. If you are not familiar with it, i recommend this tutorial first: How To Write Platform-Specific Code in .NET MAUI.

To inject platform code in Maui (in Xamarin could use DependencyService):

First, in Project folder, create a new partial class, let's call it GetImageSizeService:

public partial class GetImageSizeService
{
	public partial Size GetImageSize(string file);
}

Then creat another partial class in Platforms/iOS folder, called it GetImageSizeService also. Pay attention to the namespace should be the same as above file.

public partial class GetImageSizeService
{
    public partial Size GetImageSize(string file)
    {
        NSData data = NSData.FromUrl(NSUrl.FromString(file));

        UIImage image = UIImage.LoadFromData(data);
        return new Size((double)image.Size.Width, (double)image.Size.Height);
    }
}

Then in MainPageViewModel, we just call this service and count the AspectRatio.

=========================== First post=============

The link you add did inspire me. And if i understand your question correctly, you could try the following code which worked for me:

Create AspectImage custom control which set aspect ratio for width and height

public class AspectImage : Image
{
    public double AspectRatio { get; set; }

    public AspectImage()
    {
        SizeChanged += HandleSizeChanged;
    }

    private void HandleSizeChanged(object sender, EventArgs e)
    {
        if (this.Width > 0 && AspectRatio > 0)
        {
            var desiredHeightRequest = this.Width * AspectRatio;           
            if ((int)desiredHeightRequest != (int)HeightRequest)
            {
                this.HeightRequest = (int)desiredHeightRequest;
                InvalidateMeasure();
            }
        }
    }
}

For xaml, consume the AspectImage. Here the aspect ratio seems to be 4/9 Approximately equal to 0.44

<Grid>
    <ScrollView>
        <VerticalStackLayout>                          
            <a:AspectImage Source="https://cdn-5e5150f5f911c807c41ebdc8.closte.com/wp-content/uploads/IoT-development-kit-article-banner-scaled-900x400.jpg"
                     AspectRatio="0.44" Aspect="AspectFit" BackgroundColor="Blue">
                <a:AspectImage.Margin>
                    <OnIdiom Phone="10" Tablet="20" Desktop="20"/>
                </a:AspectImage.Margin>
            </a:AspectImage>
        </VerticalStackLayout>
    </ScrollView>
</Grid>

Hope it works for you.