# Allow for auto-scaling of image in Gtk4

**URL:** <https://discourse.julialang.org/t/allow-for-auto-scaling-of-image-in-gtk4/111624>\
**Category:** General Usage\
**Tags:** gtk4\
**Created:** [March 14, 2024, 3:44pm UTC](https://discourse.julialang.org/t/allow-for-auto-scaling-of-image-in-gtk4/111624 "2024-03-14T15:44:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 14, 2024, 3:44pm UTC](https://discourse.julialang.org/t/allow-for-auto-scaling-of-image-in-gtk4/111624/1 "2024-03-14T15:44:30Z")

</div>

In the following MWE, we can resize the window and the contained image fills out the space accordingly (while retaining the aspect ratio):

```julia
using Gtk4, GtkObservables
using Colors

win = GtkWindow("Example")
h = 100
c = canvas(h, h)
f = GtkAspectFrame(h, h, 1, false)
f[] = c.widget
push!(win, f)
img = Observable(rand(RGB, h, h))
redraw = Gtk4.draw(c, img) do cnvs, img
    copy!(cnvs, img)
end

```

But if I want to add more components (e.g. `dropdown`), and to that end I put the image in a `GtkBox`:

```julia
win = GtkWindow("Example")
win[] = bx = GtkBox(:v) # this will contain my image AND my dropdown
h = 100
c = canvas(h, h)
f = GtkAspectFrame(h, h, 1, false)
f[] = c.widget
push!(bx, f) # let's put that image in that container
img = Observable(rand(RGB, h, h))
redraw = Gtk4.draw(c, img) do cnvs, img
    copy!(cnvs, img)
end

```

This breaks. The image is static and does not expand to the resized window.

How can I get this to work?

---

<div class="post-metadata">

**Author:** ![jwahlstrand](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jwahlstrand](https://discourse.julialang.org/u/jwahlstrand)\
**Post date:** [March 14, 2024, 10:42pm UTC](https://discourse.julialang.org/t/allow-for-auto-scaling-of-image-in-gtk4/111624/2 "2024-03-14T22:42:13Z")

</div>

The issue is that GtkDrawingArea’s properties “vexpand” and “hexpand” are false by default.

Try

```julia
widget(c).hexpand = widget(c).vexpand = true

```

I think most often people want the canvas to expand, so maybe we should set these properties to true by default in GtkObservable’s canvas.

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 15, 2024, 8:32am UTC](https://discourse.julialang.org/t/allow-for-auto-scaling-of-image-in-gtk4/111624/3 "2024-03-15T08:32:02Z")

</div>

That worked! Thanks!

> we should set these properties to true by default in GtkObservable’s canvas.

In hopes of crating a PR to fix this, I tried to find where in `Gtk4` or `GtkObservables` `hexpand` and `vexpand` are set to `false` but I only found instances in examples, documentations, and a player widget. Where exactly do you suggest this default should be set?

---

<div class="post-metadata">

**Author:** ![jwahlstrand](https://avatars.discourse-cdn.com/v4/letter/j/bcef8e/32.png) [@jwahlstrand](https://discourse.julialang.org/u/jwahlstrand)\
**Post date:** [March 18, 2024, 11:04pm UTC](https://discourse.julialang.org/t/allow-for-auto-scaling-of-image-in-gtk4/111624/4 "2024-03-18T23:04:15Z")

</div>

The properties are not currently set by the package, so they use the default settings from GTK4. I would put it in the constructor for `GtkObservables`. I’m trying to keep `Gtk4` fairly close to GTK4 as far as defaults are concerned.