Automatically derive image width from fixed height and image's aspect ratio

[flozf]

Problem: I want to have a horizontally scrollable list of thumbnails. The height of the list is fixed. I want the images in the ScrollView to be scaled to the available height. The width of the thumbnails shall be derived from the aspect ratio of the image.

This is, what I came up with so far:

import { ScrollView } from "std-widgets.slint";

export struct ThumbnailInfo {
    img: image,
    description: string,
}

component Thumbnail inherits Rectangle {
    in property <image> img;
    in property <bool> selected;
    in property <string> description;

    //background: selected ? Palette.selection-background : transparent;
    background: red;

    VerticalLayout {
        height: 100%;

        Image {
            horizontal-alignment: center;
            vertical-stretch: 1;
            image-fit: contain;
            source: img;
            //width: 170px;
        }
        Text {
            horizontal-alignment: center;
            vertical-stretch: 0;
            color: selected ? Palette.selection-foreground : Palette.foreground;
            font-size: 12px;
            text: description;
        }
    }
}

component ThumbnailRow inherits ScrollView {
    in property <[ThumbnailInfo]> thumbnails;

    horizontal-scrollbar-policy: always-on;

    HorizontalLayout {
        for img[idx] in root.thumbnails: Thumbnail {
            img: img.img;
            description: img.description;
        }
    }
}

export component AppWindow inherits Window {
    in property <[ThumbnailInfo]> thumbnails-misc;

    preferred-width: 1400px;
    preferred-height: 1000px;

    VerticalBox {

        // Some more layout elements

        ThumbnailRow {
            height: 180px;
            thumbnails: thumbnails-misc;
        }

        // Some more layout elements
    }
}

The problem is, that the width of the images is reduced, so that the layout completely fits into the ScrollView area (i.e. no scrolling needed):

I understand that this is expected behavior. The image is variable in size and the layout algorithm tries to fit it into the available space.

So the question is, how to set the width (or min-width) of the image based on the aspect ratio and the height?

Here is what I tried:

The ScrollView documentations says:

If the ScrollView contains a layout, the default value for the viewport-width and viewport-height is the minimum size of that layout.

So it works, if I use a fixed width (or min-width). If I uncomment the width property shown in the Image above, it looks better:

(notice that there is a scroll bar at the bottom, and the list of images is indeed scrollable)

However, I can't find a way to tell slint to automatically determine the width from the available height and the image aspect ratio.

Even if I add the aspect ratio to my ThumbnailInfo struct, I can't calculate the width based on the height. (Like width: self.height * aspectratio or similar. I also tried min-width, parent,height, ...) I always get a "binding loop". It is not clear for me, why that is. The height of the ThumbnailRow is 180px. So the height of the ScrollView should be the same and also the HorizontalLayout and the Thumbnails and the VerticalLayouts. So the height of the Image is the height of the VerticalLayout (i.e. 180px) minus the height of the text.