Problem with resizing of pictures in gridview

[jptrzy]

I’m creating a youtube client app, but I got stuck on a simple problem.

I have a GridView with a list of videos previews.

Blueprint (.blp) files:

...
StackPage {
    name: "view";
    child: ScrolledWindow { 
        GridView list {
            vexpand: true;
            max-columns: 4;
            single-click-activate: true;
            activate => on_click();

            factory: BuilderListItemFactory factory {
                resource: "/ui/VideosListEntry.ui";
            };
        }
    };
}
...

and my /ui/VideosListEntry.blp is:

using Gtk 4.0;
using Adw 1;

template GtkListItem {
    child: Box {
        hexpand: true;
        vexpand: true;

        styles ["card"]
        orientation: vertical;

        Picture {
            hexpand: true;
            vexpand: true;
            content-fit: fill;
            file: bind GtkListItem.item.image_path typeof VideoEntry;
        }

        Label {
            label: bind GtkListItem.item.title typeof VideoEntry;
            wrap: true;
            lines: 2;
            ellipsize: end;
            xalign: 0;
            yalign: 0;
            styles ["heading"]
        }

        Label {
            label: bind GtkListItem.item.channel typeof VideoEntry;
        }
    };
}

My problem is that my items image get squishy.

and if I use keep-aspect-ratio: true;, those pictures won’t fill the given space:

This issue could be related to vscroll-policy.

[jptrzy]

I had funded an answer for my problem. Now my file look like that:

...
            Picture {
                content-fit: contain;
                can-shrink: false;
                file: bind GtkListItem.item.image_path typeof VideoEntry;
            }
...