Vertical Scroll Rect with variable size (height) image items

Hi there guys, I´been searching on the forums and trying every example i find of similar questions, but always referring with text blocks, not images, so I need some help XD

I have a Vertical Scroll Rect, with his Viewport and Content childs as default,
the Content has a Vertical Layout Group, and the Content loads Items via script, that uses a Prefab with a RawImage.

All works perfect, the Layout is filled with the images and scroll correctly.
My question is: Is it possible to load different size (height) images into the same Layout?

I tried to make it with Content Size Fitter in the Layout parent, also in the Prefab child in every combination possible but no luck (or the images are bigger, but all the same size, or gives me error and no item is visible)

Hope I explained well, if not i´ll put some images to clarify.
Thanks!!!

With a Content Size Fitter in the parent set to use preferred height, you should just need to make sure that the children all have their preferred height set to a reasonable value.

You can explicitly set the preferred height to anything you want by attaching a Layout Element component and setting its parameters as appropriate.

If you don’t attach a Layout Element, certain components will supply their own preferred-size information. For Image components, Unity sets a preferred size automatically based on the selected sprite. (However, since you often want to stretch sprites to different sizes, this might not always be the size that you want.) I don’t believe the Raw Image component has any layout information by default (scripting API says it does not implement ILayoutElement).

Hi Antistone, thanks for reply!!
I tried what you said, but there must be something I do wrong…my actual setup is as follows:

the image sizes in disk are 100px and 300px height respectively,
what I thought is that, although the size of the Prebaf Rect Transform is fixed (100), with a Layout Element it would become flexible for the different images that it loads,
but it is obvious that I am not understanding something…maybe the Prebaf Rect Transform Height must be the MAX size, and strech to every image real size instead of enlarge it?

Thanks!!

You are telling the content size fitter to use “preferred size”, but your layout element has no “preferred height” set. Try setting “preferred height” instead of “flexible height”.

One thing Antistone, I tried what you said, (and a thousand combinations between the Layout Group, Content Size, etc…) but still not work, maybe I need more than one prefab?
I mean, one prefab for images of 100px height, another for images of 300px…each one with its own Rect Transform parameters (100px heigh, 300…)

Until now I was thinking that one Rect Transform, with a Layout Element (and a preferred size or flexible height) was able to “adapt” to the loaded image, but it doesnt work.
So maybe is best to have different prefabs (“containers”) for the different sizes, and manage them into the same layout with the answer you gave me (telling to the layout the correct size to manage them)

Thanks Antistone!

I think you probably want to have whatever script loads and assigns the image also check the image’s height and update the Layout Element component appropriately.

Alternately, if you were using Image components instead of Raw Image components, Unity would attempt to determine the preferred size automatically based on the asset, and you might be able to skip the Layout Element components entirely. (But you’d have to be using Sprites instead of simple Textures as your assets.)

great!, thats a very interesting tip Antistone,
Thanks you so much XD