How to display a QImage across landscape & portrait orientations with aspect ratio maintained & not cutting off image data

Question

I have a QIMage that can be in portrait or landscape mode depending upon its width vs height. Or vice versa.

I am trying to fit a portrait QIMage in landscape mode & a landscape QImage in portrait mode without breaking the aspect ratio.

Following is how I am trying to do this:

Window {
  id: app_window
  visible: true

  Rectangle {
    id: my_image_view_container
    width: my_image.sourceSize.width
    height: my_image.sourceSize.height

    // This is a Image item which has to host a portrait/landscape image.jpg in both portrait & landscape modes on an android device
    Image {
       id: my_image
       anchors.fill: parent
       // changes at runtime based on the image my app selects
       source: "random/path/to/an/image.jpg"
       scale: Qt.KeepAspectRatio
    }
  }
}

It basically works to preserve the aspect ratio. The image is not skewed when I resize my app_window from portrait to landscape.

Problem:
But in landscape mode if the app_window's height is less than my_image's height then the image is not fully visible.

Question:
How should I set the size of my_image_view_container & my_image to be able accomplish hosting image.jpg in both landscape & portrait orientations without breaking the aspect ratio as well not missing to view parts of the image in any mode?

PS:
The challenge is for example: I take a QML snapshot & created a QImage which is 100 units width by 300 units height. Now change the orientation of the mobile device or resize window on desktop to landscape. Now, I need to fit the QIMage which is 300 units height into a height of 100 units. How to set the width & height of QIMage to accomplish this nicely? I see that Google Photos on android does it nicely by embedding a black to both side flanks of the image when you view a portrait capture image in landscape mode & vide versa. I wish to achieve exactly this functionality of Google Photos. Should be possible by setting the correct width & height of the Image QML element?

Answer 1

For your case, you can use Bindings to choose a different image depending of the current pixel density and the screen state. According to the official doc:

Binding enables objects to automatically update their properties in response to changing attributes in other objects or the occurrence of some external event.

Check the documentation about Scalability in modern Qt, I think that can be really useful. You can check the current state of the screen, landscape or portrait situation, easily by comparing the width & height:

 parameter:  width > height ? contition_1 : condition_2

In your case, I will recommend to have 2 different images depending of the state. In the official doc you can find an Orientation Observer that aims to do what you want for the binding. By the way, you can do something like this:

Image {
   source: {
      if (width > height)
        "image_1.png"
      else
        "image_2.png"
    }
}

[UPDATE]

As alternative, if you want to use the same image,you can handle the property Orientation of the Screen class. If you fit the image size, via the property width, height to the Screen.width & Screen.height properties should be enough. If you are planing to use a custom code, then:

Image {
    id: image
    source: "image.jpg"
    width: whatever
    height: whatever 
    fillMode: Image.PreserveAspectFit
    anchors.top: parent.top

    Screen.onOrientationChanged: {
       if (Screen.primaryOrientation === Qt.PortraitOrientation) {
          image.width = 300;
          image.heigh = 100; 
       } else {
          image.width = 100;
          image.heigh = 300;
       }
    }
}