QML Rotated Image not Filling Container

Question

I am working with QML to try to display an image. I have the following code:

Rectangle {
  id: border
  anchors {
    top: parent.top; 
    topMargin: vpx(20); 
    right: parent.right;
  }
  color: "black"
  z: 6
  width: 500
  height: 750
            
  Image {
    id: picture
    width: parent.width
    height: parent.height
    transformOrigin: Item.Center
    rotation: (implicitWidth/implicitHeight > 1.3) ? 270 : 0
    anchors.fill: border
    fillMode: Image.PreserveAspectFit
    source: ".../pic.png"
  }

If rotation is set to 0, it scales correctly to fill the rectangle. If rotation is set to 270, it doesn't fill the rectangle - it rotates correctly, but it is well within the rectangle in both directions. It should have scaled up more.

Why is this happening?

EDIT: The code above has been edited. All of the above code is within a larger rectangle. The purpose of this code is to rotate images 90 degrees when they have a width > height. When rotation is set to 0 (i.e. height > width and no rotation needed), the picture displays as the first case below. When set to 270 (i.e. width > height, rotation needed), the picture displays as the second case below. I would like it to be comparable to the first picture, which fills the width, as I understand "fillMode: Image.PreserveAspectFit" should work.

black is rectangle, red is the image.

Answer 1

It is kind of tricky, but you can try this way:

Rectangle {
    id: border
    anchors {
        top: parent.top;
        right: parent.right;
    }
    color: "black"
    z: 6
    width: 500
    height: 750

    Item {
        id: pictureItem
        transformOrigin: Item.Center
        rotation: (picture.implicitWidth/picture.implicitHeight > 1.3) ? 270 : 0
        anchors.centerIn: parent
        width: rotation == 270 ? parent.height : parent.width
        height: rotation == 270 ? parent.width : parent.height

        Image {
            id: picture
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            source: ".../pic.png"
        }
    }
}

I have prepared two test images:

And this is what I get with above chunk of code: