How to resize a QImage or QML Image to fit parent container without breaking the Image's aspect ratio

Question

Scenario:
I have an Image component in QML which contains a QImage of varied aspect ratios.

Code:

Window {
  id: app_window
  visible: true

  Rectangle {
    id: my_image_view_container
    width: app_window.width
    height: app_window.height

    Image {
       id: my_image
       // changes at runtime based on the image my app selects
       source: "random/path/to/an/image.jpg"
       width: sourceSize.width
       height: sourceSize.height
       scale: Qt.KeepAspectRatio
    }
  }
}

Question:
How do I set the width & height of the my_image_view_container so as to fit my_image completely inside my_image_view_container without disturbing its aspect ratio?

score 19 · Accepted Answer · answered Dec 12 '17 at 13:43

19

You can use fillMode property. Like this

fillMode: Image.PreserveAspectFit

answered Dec 12 '17 at 13:43

Andrey Semenov

901
11
17

1

Exxactly what I was looking for. I knew this property long time ago. Was missing to set this right. thanks a ton ! – TheWaterProgrammer Dec 12 '17 at 13:49

How to resize a QImage or QML Image to fit parent container without breaking the Image's aspect ratio

1 Answers1