How do I change imagesize to fit on other screens and preserve aspect-ratio in Qt creator qml

477 views Asked by At

I have built my first user interface with Qt quick qml - code. All images are put in the rigth place, x and y coordinates, and the standard size of the ui is width:1540 and height:540. But I want it to fit on ipad with the resolution 1024 x 768. How do I scale the whole ui to fit on other screen and preserve aspect ratio and that the ui looks the same on both screens?

My code looks like this:

    import QtQuick 2.0
    import QtQuick.Window 2.0
    import QtGraphicalEffects 1.0

    Item{
        id: root
        focus: true
        width:1440
        height:540

    ...

    Image {
        id: layer_0
        source: "images/layer_0.png"
        x: 0
        y: 0
        opacity: 1
    }
    Image {
        id: layer_1
        source: "images/layer_1.png"
        x: 4
        y: 1
        opacity: 1
    }
    Image {
        id: emap
        source: "images/€map.png"
        opacity: 1
    }

    ...

    }
1

There are 1 answers

0
joe f On

Hello in each of your image components you can add:

fillMode: Image.PreserveAspectFit

Also to have better control for varying screen sizes consider using the Grid component to organize everything.