# \[Solved\] How do I display images of different sizes in an image component? **URL:** \ **Category:** Questions about Thunkable X\ **Tags:** beginner\ **Created:** [March 11, 2022, 9:14pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561 "2022-03-11T21:14:21Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)\ **Post date:** [March 11, 2022, 9:14pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/1 "2022-03-11T21:14:21Z")
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: ![HexFlagImage-Screenshot 2022-03-11 20.40.47](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/1/e19f41ebd32e3f154b8866b73a4426fcfb21f3db.png) Also, notice that **neither the full height, nor the full width** of the Flag images are displayed either. ![HexFlagImageNZ-Screenshot 2022-03-11 21.06.49](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/4/740faf072cfd4fc9ef81a61fc6455be7f954038b.png) Also, is there a way to scale the Flag images down to **fit to a set size**? Andos ---
**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\ **Post date:** [March 11, 2022, 9:25pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/2 "2022-03-11T21:25:41Z")
Set the background picture resize mode to Contain. See this: > **[Image](https://docs.thunkable.com/image-1#resizing-the-image)** > > The image component lets you display pictures in your app. ---
**Author:** ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)\ **Post date:** [March 11, 2022, 9:57pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/3 "2022-03-11T21:57:34Z")
Hi @tatiang, I have just updated the DVL template and loaded it to my Hexcode Screen. The results are still the same. See below: ![HexDVLFlafDesign-Screenshot 2022-03-11 21.59.38](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/9/f9ab68b52b7d9fd2f1a5325b8bef203cff58842e.png) ![HexDVLFlagAE-Screenshot 2022-03-11 21.54.02](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/0/30fc48750426fd46568d76da7d6df3c18bc5e6c7.png) 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. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [March 11, 2022, 10:16pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/4 "2022-03-11T22:16:00Z")
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](https://x.thunkable.com/projectPage/622b5f8eb8eb67001021922c) [the model](https://x.thunkable.com/projects/62069f463d326a0010c4f81d/03978d12-d43b-464c-a6f8-537d6967b49a/designer) ---
**Author:** ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)\ **Post date:** [March 11, 2022, 10:31pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/5 "2022-03-11T22:31:25Z")
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. ---
**Author:** ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)\ **Post date:** [March 12, 2022, 2:10pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/6 "2022-03-12T14:10:42Z")
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. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [March 12, 2022, 3:11pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/7 "2022-03-12T15:11:24Z")
Have you tried the contain setting? ---
**Author:** ![andos-avlog](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/andos-avlog/32/122340_2.png) [@andos-avlog](https://community.thunkable.com/u/andos-avlog)\ **Post date:** [March 12, 2022, 3:16pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/8 "2022-03-12T15:16:06Z")
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](https://docs.thunkable.com/intro-to-sizing#the-special-case-of-images)** 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 ![UAEFlagImage-Screenshot 2022-03-12 15.08.52](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/c/fc852f316ea2c8209448857d8cb3a45b7771bb39.png) Fig.2 ![NZFlagImage-Screenshot 2022-03-12 15.11.39](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/d/6da377b46500df0c401f98385792447ef031a410.png) Fig.3 ![BEFlagImage-Screenshot 2022-03-12 15.13.13](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/e/2efecf26580fa9e3312e202087e20e75471ca0f7.png) Andos. ---
**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\ **Post date:** [March 12, 2022, 3:47pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/9 "2022-03-12T15:47:39Z")
Awesome!!! Glad you found your solution! ---
**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\ **Post date:** [June 10, 2022, 3:48pm UTC](https://community.thunkable.com/t/solved-how-do-i-display-images-of-different-sizes-in-an-image-component/1779561/10 "2022-06-10T15:48:15Z")
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.