Xamarin forms Images stretching

87 Views Asked by At

enter image description hereI'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

1

There are 1 best solutions below

0
Jessie Zhang -MSFT On

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.