Nominate our 2022 Qt Champions!

[SOLVED]Unexpected behavior with anchors of scaled image

  • My basic question is: Do anchors of scaled images work differently than unscaled images?

    I have the following setup:

    ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        width: 170
        height: 170
        color: "yellow"
        Image {
            anchors.horizontalCenter: parent.horizontalCenter
            source: "Elefant.svg"
            //scale: 0.5
            Rectangle {
                anchors.fill: parent
                z: -1
                color: "green"


    This of course works as expected and the image is anchored at the top of the yellow rectangle. However as soon as I uncomment the "scale: 0.5" line in the Image, the image is no longer anchored at the top.


    Is this normal for scaled images? Is there simple way to fix this and still get image anchored at the top?

  • Strange behavior!
    I don't know if this is normal, but here is a solution:
    Add the following line to Image component:

    @anchors.topMargin: -((height-(height*scale))/2)@

  • I think this is how it's designed to work. If you want the scaling to happen from the top instead of the center (the default) just add
    @transformOrigin: Item.Top;@

    to your Image properties.

    Depending on your level of Qt Quick expertise you might like my Pluralsight "Qt Quick Fundamentals": course. Free VIP passes (unlimited viewing for a week) are available on request while supplies last.

  • Rolias, that is exactly what I was looking for, it works like a charm. Thank you very much.

    Your course looks quite interesting. I might have a look at it as soon as I can spare some extra time.

Log in to reply