Control the height of an image in a scrollview - xaml

Question

I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image

Answer 1

Thx #Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>