title: How can I make an image auto-resize so the width is 100% and the height adjusted accordingly?
body: <p>I have the following simple XAML page:</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"
               x:Class="Test.UserGuides.VPN"&gt;
      &lt;ContentPage.Content&gt;
          &lt;ScrollView&gt;
              &lt;StackLayout HorizontalOptions="Center" VerticalOptions="Center" Margin="10,10,10,10"&gt;
                  &lt;Label Margin="10,10,10,10" Text="How to connect to VPN." HorizontalOptions="Center" /&gt;
                  &lt;Label Margin="10,10,10,10" Text="If you have a corporate notebook, look for the Cisco AnyConnect application. Either in your start menu, on your desktop, or in your taskbar." /&gt;
                  &lt;Image x:Name="imgVPN1" Margin="10,10,10,10" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" /&gt;
                  &lt;Label Margin="10,10,10,10" Text="Select your region and press the Connect button." /&gt;
              &lt;/StackLayout&gt;
          &lt;/ScrollView&gt;
      &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>In the constructor, I call a method to load the images:</p>
  
  <pre><code>private void LoadImages()
  {
      imgVPN1.Aspect = Aspect.AspectFit;
      ImageSource imagesrc = ImageSource.FromResource("Test.Files.CiscoAnyConnect.PNG");
      imgVPN1.Source = imagesrc;
  }
  </code></pre>
  
  <p>The result looks like this on my (rather large, high DPI) phone:</p>
  
  <p><a href="https://imgur.com/WYQISB0" rel="noreferrer">imgur link 1</a></p>
  
  <p>Of course, I want the image to automatically expand so it takes up the entire width of the screen. While maintaining the aspect ratio. But how can I achieve this? I've already tried putting the Aspect to "AspectFill", and added</p>
  
  <pre><code>imgVPN1.WidthRequest = Application.Current.MainPage.Width;
  </code></pre>
  
  <p>To the LoadImages method, but that makes the end result look like this:</p>
  
  <p><a href="https://imgur.com/YvUOsRk" rel="noreferrer">imgur link 2</a></p>
  
  <p>I've been toying around with various HorizontalOptions, VerticalOptions, Aspects, GridView, StackLayouts,... The end result is always either the first or the second screenshot. So how can I achieve what I want here?</p>