How to avoid image distortion?

Hello people!

I’m new to kodular and I have a problem.

I created a “header” in the application with a card and an image inside the card.

On large screens, the header behaves well, not distorting the image (Screen 1). However, when the cell phone screen decreases, the image is distorted (Screen 2).

What can I do to prevent this from happening?

Did you forget to upload the second image?

1 Like

Sorry guys, I forgot the second image:

You need to keep the arrangement height proportional to the the width. Your problem is that you are using a fixed height percentage. That will squish the image in a smaller screen or stretch it in a larger one.

Solution:
First, set the arrangement width to whatever width you need to.
Then use this formula to get the height necessary for the image to not get stretched or squished:

arrangement_height = (original_image_height / original_image_width) * arrangement_width

Make sure you put everything inside a scrollable arrangement in case the height of the image ends up pushing the lower components outside the viewable area.

3 Likes

I’m understanding.

In this case, should I replace the card for arrangement?

As I am new to Kodular, could you show me how I do this in the blocks?

make sure you have the image scale to fit unchecked and the width to fill parent

Capture

I don’t know about cards. I never used those. I guess they are the same as an arrangement? If you need the round corners then do what I said. If not, use an image component and do what @Baraa_Awwad said.

To do what I said, just use the math blocks to do the calculations as I explained up there.

almost the same but you can’t actually set a cards background to an image only a color

so he either has an arrangement inside it or an image… and an image in this situation is probably the easier choice.

1 Like

Use if lenght if screen ()then set font ()

Thank you @Italo! It really worked for me.

This expression also works with cards!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.