title: In Xamarin.Forms, how to make image shrink to match container size
body: <p>I have a Xamarin.Forms app with a page that show an image and some other elements. The image is a png and on some screens it is too large for it to show unscaled while all the other elements also show.</p>
  
  <p>My question is: Is there any way to get Xamarin.Forms to automatically scale the image down in order to fit everything on screen?</p>
  
  <p>I have a small example to show the problem:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;ContentPage 
      xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:local="clr-namespace:PocImageScaling" 
      x:Class="PocImageScaling.MainPage"&gt;
  
      &lt;StackLayout x:Name="stack1" BackgroundColor="Gray" Spacing="0"&gt;
          &lt;BoxView x:Name="box1" HeightRequest="200" BackgroundColor="Yellow" /&gt;
  
          &lt;Image x:Name="img1" Source="infoscreen_graphic.png" Aspect="AspectFit"/&gt;
  
          &lt;BoxView x:Name="box2" HeightRequest="200" BackgroundColor="Olive" /&gt;
          &lt;BoxView x:Name="box3" HeightRequest="50" BackgroundColor="Yellow" /&gt;
      &lt;/StackLayout&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>and in code-behind I have</p>
  
  <pre><code>    protected override void OnAppearing()
      {
          base.OnAppearing();
  
          Debug.WriteLine($"page.Height = {this.Height}");
          Debug.WriteLine($"stack1.Height = {stack1.Height}");
          Debug.WriteLine($"box1.Height = {box1.Height}");
          Debug.WriteLine($"img1.Height = {img1.Height}");
          Debug.WriteLine($"box2.Height = {box2.Height}");
          Debug.WriteLine($"box3.Y = {box3.Y}, box3.Height = {box3.Height}");
      }
  </code></pre>
  
  <p>What I see on run-time on an iPhone SE is </p>
  
  <pre><code>page.Height = 568
  stack1.Height = 568
  box1.Height = 200
  img1.Height = 152
  box2.Height = 200
  box3.Y = 552, box3.Height = 50
  </code></pre>
  
  <p>The yellow box3 is almost not visible at the bottom and thus goes beyond the bounds of the StackLayout and the ContentPage.</p>
  
  <p>I would have liked instead that the Image would shrink enough for everything to be on-screen.</p>