[Solved] How do I display images of different sizes in an image component?

[andos-avlog]

Hi, I am trying to add Country Flags to my Data Viewer List but some flags are displaying too big to fit on the screen and some flags are fit OK. (I guess!).

All the flags are different sizes so I created a DVL Template in preparation for this, but I still can’t seem to get the flags to fit properly inside the container.

What I am asking is:

By using the DVL settings when creating a template, does anyone know how to make the flags fit?

See images below:

Also, notice that neither the full height, nor the full width of the Flag images are displayed either.

Also, is there a way to scale the Flag images down to fit to a set size?

Andos

[tatiang]

Set the background picture resize mode to Contain.

See this:

Image

[andos-avlog]

Hi @tatiang, I have just updated the DVL template and loaded it to my Hexcode Screen. The results are still the same. See below:

I have already read the help link that you sent to me previously. It seems to refer mainly to single set images not images of varying sizes in a DVL.

I know there must be a way to do this.

Andos.

[jared]

Hey @andos-avlog

check out this template that i worked on today. it contains the image by setting the outer container to be a max width and the image to be fill container. i then use the stretch feature so that the image is stretched to fill the image component.

Demo in DnD

the model

[andos-avlog]

Thanks @jared, I shall take a look at it tomorrow. Its 2230 here in UK.

I’ll let you know how I get on.

Andos.

[andos-avlog]

Hi @jared, I have had a look at both your demo and your model. The main problem I am having is that some of the flag images I have are too large to fit inside the container. I also wish to display the images without "stretching them as I do not wish to be disrespectful to a nation’s flag.

I just wish for flag images to be displayed in their original state but scaled up or down, if necessary, to fit into the image container.

Many thanks for your suggestions though!

Andos.

[jared]

Have you tried the contain setting?

[andos-avlog]

Hi @jared, @tatiang, I have found the solution. The solution was found because I asked the wrong question.

I should have asked was " How do I scale an image?"

I found the answer in discussion in which @albert and @domhnallohanlon had provided a link to part of the solution. Link below:

🖼️ Intro to Sizing

I took on board the advice from the link but instead of using the relative height and width settings with contain. I simply used the absolute height and width settings instead with “contain”. But first I got the properties of the images by right-clicking on them. Then by dividing the pixel width by the pixel height (= 1.99344…) then multiplied it by the image height that I wanted. ( which was 200px). This then gave me the pixel width (398px) required width to create the ideal image ( 398 x 200). Now, all sizes are displaying perfectly.

Please see images below:

Fig.1

Fig.2

Fig.3

Andos.

[jared]

Awesome!!!
Glad you found your solution!