GridLayout How to make equal row dimensions

[Firemanpl]

If i pushing Image .svg into Rectangle. Rows are adopting to Images. I want that Images will adopt to Rows not the other way around.

export component Loading inherits Window {
icon: @image-url("src/assets/svg/xyz_logo.svg");
preferred-height: 100%;
preferred-width: 100%;
always-on-top: true;
background: #000;
GridLayout {
    Row{
        Rectangle {
            colspan: 3;
            border-color: yellow;
            border-width: 1px;
            Image {
                source: @image-url("src/assets/svg/zvf_logo.svg");
            }
        }
    }
    Row{
        Rectangle {
            colspan:3;
                Image {
                    image-fit: contain;
                    source: @image-url("src/assets/svg/sicuid_logo.svg");
                }

        }
    }

    Row{
        Rectangle {
            colspan: 3;
            border-color: cyan;
            border-width: 1px;

        }

    }
}
}

[hunger]

The only thing reporting a size in your code above is the image data. The Image elements defaults to that size when nothing else is set. The rectange surrounding the Image adapts to the size of the image, the Row to the size of the Rectangle, the GridLayout to the Rows and the Window to the Gridlayout.

You can e.g. set a height and width on the images themselves or the rectangles around them to change that.

[Firemanpl]

Ok, but How can I achieve the same Rows dimensions ? Because I want to for eg. set image to middle, without adopting Rows to rectangle and Rectangle to Image. How to make to adopt width and height to changing dimensions of whole window. If i resize window that all of dimensions elements will adopting to Window including all elements / object under Window / Page. (I don't know how to name this). I want to make responsive ui which can to match to every screen by fractal scaling interface and changing location elements of ui interface.

[hunger]

Check out Window::scale_factor for the fractual scaling. There is no need to change anything in the slint files (if you do not use physical units of course).

I am not sure I completely got what you want to do. Is this close?

[Firemanpl]

Ok. I solved this.
`export component Loading inherits Window {
title: "dfd";
icon: @image-url("src/assets/svg/dfdf_logo.svg");
preferred-height: 100%;
preferred-width: 100%;
always-on-top: true;
background: #000;
Rectangle {
drop-shadow-blur: 0px;
drop-shadow-color:white;
Rectangle {
x: 0;
y: 0;
width: parent.width ;
height: parent.height / 3;

Image {
source: @image-url("src/assets/svg/dfd_logo.svg");
height: 5%;
}
}
Rectangle {
x: 0;
y: (parent.height - self.height) / 2;
width: parent.width;
height: parent.height / 3;

Image {
source: @image-url("src/assets/svg/dfdf_logo.svg");
height: 40%;
}
}
Rectangle {
x: 0;
y: (parent.height - self.height) / 1;
width: parent.width;
height: parent.height / 3;
}
}

}`

[ogoffart]

You can also use % width and height in a layout to get that effect.

So height:33.33%; on every element should have the desired effect