How to make an image fill the width of a box and keep aspect ratio?

Hello !

I’m learning GTK4 and I’m trying to make a sort of gallery with labels (how original). All the images have the same aspect ratio and are placed as such :

GtkScrolledWindow
    GtkViewPort
        GtkFlowBox
            GtkFlowBoxChild
                GtkBox
                    GtkImage
                    GtkLabel
            GtkFlowBoxChild
                GtkBox
                    GtkImage
                    GtkLabel
            ...

I have the FlowBox set to have 5 elements per row.
The FlowBoxChild all stretch horizontally to take the whole width and their box do the same.
What I would like is the images also stretch horizontally to take up their box’s full width and make the box bigger vertically by keeping their natural aspect ratio.

However, this is not happening. The images’ bounding box seems to expand as wanted, but it wont respect the image’s aspect ratio. How could I do that ?

See here the image’s bounding box in blue, with the help of the GTK Inspector.

Share a snippet in Vala about keep ratio:

Gtk.Picture add_conn_image;
Gdk.Pixbuf? image_pixbuf = ImageCache.singleton.get_resource_pixbuf(database_image_filename);
if (null != image_pixbuf) {
    image_pixbuf = image_pixbuf.scale_simple(128, 128, Gdk.InterpType.BILINEAR);
    add_conn_image = new Picture.for_pixbuf(image_pixbuf);
} else {
    add_conn_image = new Picture.for_resource(database_image_filename);
}
add_conn_image.width_request = 150;
add_conn_image.height_request = 150;
add_conn_image.can_shrink = true;
add_conn_image.keep_aspect_ratio = true;
1 Like

Thanks a lot for the idea of using Pictures instead of Images, for the caching method and for the size request ensuring a minimum size.
However, it does not solve the problem, my pictures won’t fill the whole width.

Result :

Anyone has an idea to make these images fill the width and “push” the following lines down (overflowing if needed) ?

Thanks a lot.

Comment line to fill width:
add_conn_image.keep_aspect_ratio = true;

1 Like

It’s not that, it appears. It seems that the images won’t use more width if there is no more height (they will not make the ScrolledWindow overflow).
I want the images to keep aspect ratio and take full width, even if it means overflowing and needing a scrollbar.

Edit : This behavior seems to come from the RequestMode of the Picture widget which is GTK_SIZE_REQUEST_HEIGHT_FOR_WIDTH and what I need is the opposite, GTK_SIZE_REQUEST_WIDTH_FOR_HEIGHT (setting width defines the height).

Edit 2 : The previous edit is wrong, the current RequestMode is good according to the documentation :

Height-for-width means that a widget can change how much vertical space it needs, depending on the amount of horizontal space that it is given

Edit 3 : It seems that @melix99 had the same question in another topic and it was unanswered.

1 Like

I’m replying here as I finally found the solution to my issue and it seems realated to yours. You can set the vscroll-policy to natural, this way the widgets will use their natural sizes . Also, notice that this will only work with GtkPictures with the ‘can-shrink’ property set to true.

2 Likes

This is the solution to my problem.

However, now my images won’t shrink down as much… That’s a weird behavior.
For my 600x900 images the minimum size is 320x480.
This is of course with can-shrink set to true and I’ve not set any size request (but I’ve tried, it’s not working).

Any idea ? Should I open a new topic ?