Simple responsive BoxContainer with images

MaloMnMaloMn Posts: 2Member
edited July 2020 in GUI


I'm trying to create a responsive VerticalBoxContainer which contains two images.
Here's what I've done for now:

  • VBoxContainer
    • PanelContainer
      • TextureRect (with one image)
    • PanelContainer
      • TextureRect (with another png image)

What I want is for each image to use respectively 80% and 20% vertically of the window size, while maintaining their respective ratios and centring them horizontally.

In order to use the full window, I applied the FullRect layout for the VBoxContainer. However, images are not resizing automatically. At first, I had used an image resolution that was too small for the images imported, and Godot could not size them up (understandably). Hence, I sized up their resolution, and now Godot can't size them down to be responsive, and the second image is going out of the window.

I actually do not know if this is the best approach. I know I haven't given any settings regarding the PanelContainers Size Flags, and that is because what I've done doesn't work. I did use the ratio constant on both Panels, but it doesn't seem to change anything with my setup. Would anyone know what settings I should use on the given objects to reach my goal?

Here are two examples of wanted behaviours:
Two windows next to each other showing two different behaviours according to the ratios


  • UnknownUserUnknownUser Posts: 1,389

    I think you have to set TextureRect as below:
    Expand = on
    Stretch Mode = Keep Aspect Centered
    Size Flags = Fill and Expand (for both Horizontal and Vertical)

    Let me know if it works.


Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file