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

Roby Brundle

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?

sierdzio

Use this:

fillMode: Image.PreserveAspectFit

Docs:
https://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop