Xamarin forms Images stretching

Question

I'm trying to display images in my Xamarin forms app using "FFImageLoading" library, however, when I try to display with aspectFill it gets cut off and when I try aspect fit, it leaves spaces on the sides. I want the image to be full-width and still maintain it's resolution, similar to what Instagram does. See code below:

<Grid
    Padding="0"
    Grid.Column="0"
    Grid.Row="1"
    Grid.ColumnSpan="3"
    HeightRequest="430"
    HorizontalOptions="FillAndExpand"
    IsClippedToBounds="True">
    <ffimageloading:CachedImage
          DownsampleToViewSize="True"
          VerticalOptions="Start"
          Aspect="AspectFill"
          DownsampleUseDipUnits="True"
          HorizontalOptions="FillAndExpand"
          Source="{Binding PhotoPath}">
          <ffimageloading:CachedImage.Transformations>
                </ffimageloading:CachedImage.Transformations>
          </ffimageloading:CachedImage>
</Grid>

I've also attached some screenshot for visuals:[ Shows full image but head gets cut off the "aspectfill"][1] Seconds one there's space between, I want it to be full screen

you probably need to set the size of the image control to match the aspect ratio of the image. — Jason, Aug 13 '23 at 16:32
When images have different aspect ratios, "Same height and full wider" means either crop or fill, you have to choose one for [aspect](https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.aspect?view=xamarin-forms). — Shaw, Aug 14 '23 at 01:26

score 0 · Answer 1 · answered Aug 14 '23 at 07:00

I want the images to be of the same height.

From document Display images, we could know that:

The Aspect property determines how the image will be scaled to fit the display area:

Fill - Stretches the image to completely and exactly fill the display area. This may result in the image being distorted.

AspectFill - Clips the image so that it fills the display area while preserving the aspect (i.e. no distortion).

AspectFit - Letterboxes the image (if required) so that the entire image fits into the display area, with blank space added to the
top/bottom or sides depending on whether the image is wide or tall.

So, if you want to display your image completely, you can try to set property Aspect to Fill(Aspect="Fill") for your Image. But this may result in the image being distorted.

Of course, the better way is to set the size of the image control to match the aspect ratio of the image.

If you want the images to be of the same height, you can use these images that with the same or similar aspect ratio of the image.

Xamarin forms Images stretching

1 Answers1