GTK4 Image Which Fills Parent

Question

I am trying to create an image which fills its parent widget in both dimensions while keeping the aspect ratio. In gtk4-rs I did

let picture_widget = gtk::Picture::builder()
    .hexpand(true)
    .vexpand(true)
    .halign(gtk::Align::Fill)
    .valign(gtk::Align::Fill)
    .keep_aspect_ratio(true)
    .can_shrink(true)
    .build();

But this fills only one dimension of the parent. However, I would like to overflow the parent in that dimension, such that both dimensions are filled.

Generally, I think my goal could be achieved by child.set_size_request(parent_width, parent_height). That needs to be done every time the parent size changes.

Idea 1: Listen to size_allocate signal of parent. Does not work, because the size_allocate signal has been removed: https://docs.gtk.org/gtk4/migrating-3to4.html#adapt-to-gtkwidgets-size-allocation-changes

Idea 2: Subclass Picture and set size in allocate(). But Picture is apparently not subclassable. The compiler tells me that

type ParentType = gtk::Picture; => the trait IsSubclassable<FillingPicture> is not implemented for Picture

Idea 3: Subclass Widget and use Picture inside (from https://github.com/gtk-rs/gtk4-rs/issues/393). I do not know how to then link all the function calls together such that the Picture is actually shown. (It also feels wrong to do this. If this was easily possible, Picture would probably be subclassable?)

Idea 4: Reimplement the whole Picture class from scratch. Seems overkill and too much maintenance overhead just for a simple resize.

Idea 5: Use CSS properties to fill the parent. I tried setting width and height to 100%, but apparently relative sizes are not allowed. Also the cover CSS attribute is not supported.

Idea 6: Drop GTK

Any other ideas or fixes for the ideas above?

No, I've given up so far. When I get back to it, maybe I can post some more complete code. Not sure if that is why there are no answers here so far. Or maybe it is a really an unsolved problem? In any case, it seemed to me that some properties are only available through CSS, but not through a library API, i.e. a function call. — LiterallyCode, Jan 24 '22 at 13:05

score 1 · Answer 1 · edited Feb 20 '23 at 00:47

Just getting with the same problem yesterday. The one that works for me was the 5th idea...

Idea 5: Use CSS properties to fill the parent. I tried setting width and height to 100%, but apparently relative sizes are not allowed. Also the cover CSS attribute is not supported.

But using background-image instead.

box.nameofclass {
background-image: url("resource:///{your_path_in_gresources}/pic.jpg");
background-position: center;
}

result

More info: Backgrounds

I'm just beginning with gtk4-rs, so it may not be the best way to do it. It would be great to set this via properties tbh.

GTK4 Image Which Fills Parent

1 Answers1