Xamarin Forms Image fill width with proper aspect

Question

Here is xaml (an image in stacklayout). Everything is logical: I set Aspect to AspectFit and HorizontalOptions to FillAndExpand. Width of image must fill the width of stackl

Answer 1

I had a similar problem. I wanted to fill the width and the height of a StackLayout when possible but without cropping the actual image. The answers here have helped me find the correct way. Here is what has worked for me:

            <Grid 
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                 >
                <Image
                   x:Name="photo"                         
                   Aspect="AspectFit"                    
                />
            </Grid>

Maybe it will be of use for someone.

Clarification:

HorizontalOptions and VerticalOptions are with the value FillAndExpand, so the height and the width of the Grid are adjusted to fill the parent, in this case that is the Stacklayout. The image is a child of the Grid, so it transforms according to the parent (we haven't given any additional options to the image).

The aspect of the image is set to AspectFit, so that the image will fit the view (in this case the Grid) and also preserve its ratios.

In this way, if the image is in portrait mode but too narrow, it will fill the Grid's (StackLayout's) height but won't fill the width in order to preserve its ratios and to not be cropped from above or under.

If the image is in landscape mode, it will fill the Grid's (StackLayout's) width but won't fill the height in order to preserve its ratios and to not be cropped from left or right.

Answer 2

Aspect="AspectFit" use to fit your image inside the layout it can left space if images are small. Aspect="AspectFill" used to fit your image inside the layout and it will strech your image to take full space and it will not left space either your image is small with respect of your parent layout space. So You have to use AspectFill in place of AspectFit.

Answer 3

It work with me

<Grid HorizontalOptions="FillAndExpand"
  VerticalOptions="FillAndExpand">
  <Image
         Aspect="AspectFill" 
         HeightRequest="255"
         WidthRequest="255">
         Source="https://pbs.twimg.com/media/DzZdI3AWkAYxH13.jpg" />
</Grid>

Answer 4

heightrequest of stacklayout must be either StartAndExpand or FillAndExpand or EndAndExpand in order to automatically adjust height

Answer 5

I think this works. The trick is to wrap the image in a frame and bind the frame height to the image. In this example I am fitting the image to one side of a grid. hope it helps

 <Label Text="one lable" FontSize="Large"></Label>
                    <Grid  HorizontalOptions="Center"  BackgroundColor="Yellow" Margin="0"  >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Frame Padding="0" Margin="0"  HeightRequest="{Binding Source={x:Reference image}, Path=Height}" HasShadow="False"   Grid.Row="0" Grid.Column="0" VerticalOptions="Start" >
                            <Image x:Name="image"   Source="roth9_2.bmp" Aspect="AspectFit" ></Image>
                        </Frame>
                    </Grid>

                    <Label Text="another label" FontSize="Large"></Label>