locked
Background image fix height problem RRS feed

  • Question

  • User215313 posted

    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?

    Tuesday, May 14, 2019 9:35 AM

All replies

  • User382871 posted

    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/

    Tuesday, May 14, 2019 12:49 PM
  • User215313 posted

    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

    Tuesday, May 14, 2019 2:53 PM
  • User215313 posted

    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...

    Tuesday, May 14, 2019 3:14 PM
  • User3516 posted

    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

    Wednesday, May 15, 2019 5:54 AM