Forum› Cross Platform with Xamarin

Background image fix height problem

EnricoRossiniEnricoRossini USMember ✭✭✭✭
in Cross Platform with Xamarin

I have an small issue with images. In my app I want to display a movie page with the poster in background. On top on that, some more information about the movie. The result page is in the following image:

Image example

All images are the same dimenstion 1920x1080. As you can see, the background image is stretch and it is not really clear. How can I fix the background cross platform to have a nice background?

Tagged:

Answers

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    In Android you need to simply match your Launcher Icon with the target device DPI:

    For more details, refer to: https://www.wintellect.com/understanding-native-image-sizing-in-xamarin-forms-apps/

  • EnricoRossiniEnricoRossini USMember ✭✭✭✭
    edited May 2019

    Thank you @yelinzh but I'm sure I didn't explain the problem.
    I have only one image that comes from an Uri with always the same size. The images are very high quality and we use them in different devices.

    I want to display a nice background without streching it.

    For example

    • I have my image 1920x1080.
    • I display the image in a ContentView
    • Based on the screen of the ContentView, I should resize the image based on the width of the ContentView.
    • The image probably is bigger then the ContentView, then I want to display only the part of the image fit in the ContentView
  • EnricoRossiniEnricoRossini USMember ✭✭✭✭

    Another way to see it is...

    • The image must fit the ContentView in any orientation
    • The image has to start from the top of the page
    • The image has to be centered in the ContentView
    • if the image fit the height but it is too big in width, the image must be centered horizontally

    It is a kind of mask...

  • DirkWilhelmDirkWilhelm USMember ✭✭✭✭✭

    Try setting the Aspect property of your image to AspectFit or AspectFill

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows

Sign In or Register to comment.