Question by rpuls · Oct 15, 2019 at 09:39 AM · ui scrollview layout

UI horizontal scroll view, make child image 100% height while keeping aspect ratio

I'm trying to make a responsive horizontal scroll layout, where each child element should fit parents height and width should follow along based the image aspect ratio.

Right now I have a horizontal layout group, each child element is an UI image with turned on preserve aspect ratio so the image never get squeezed in either height or width. but they doesn't seem to scale right. As you see the image below, the child elements should be bigger so that they take up all the height, but they don't.

alt text

I have tried turning on control child size - height on the layout group, and as you can see in the image below, this does actually force the components height to match parent. Now the problems is just that since the width of the child is fixed the image it self is not expanding in height...

enter image description here

Only way I have been able to achieve the behavior that I want is by adding an aspect ratio fitter on each child, setting it to height controls width and set the ratio to the same aspect ratio as the image has. The layout group forces the child component to fit its height, and the aspect ratio fitter actively increases the child components width to match the aspect ratio of the image, make it nice and responsive. wide screens will see more children at once, narrow screens will see less and more will overflow, but since it is a scroll rect that is no problem.

The problem is that I am not allowed to set the aspect ratio fitter on the children when the parent has a layout group. (there is a warning on the component about this) and when I click play it behaves weird, the children looses their width and get stacked on top of each other.

So my question is. What settings should I use on the layout group (and/or) the content size fitter? And what settings should I use on the child image, in order to get: