如何在QML Image组件中保留图片原始尺寸并适配父容器？

你当前的代码直接将Image的宽高设置为图片原始尺寸（sourceSize.width/sourceSize.height），导致图片要么超出父容器范围，要么缩在容器角落，无法适配容器的可用空间。要实现保留图片原始宽高比的同时适配父容器（支持拖动查看超出部分），需要通过计算缩放比例来调整图片尺寸，并限制拖动范围。

以下是两种常见场景的实现代码：

场景1：图片填满容器（超出部分可拖动查看） #

此场景下图片会按原始比例缩放至填满容器，超出容器的部分可通过右键拖动查看：

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: imageRect
        anchors.fill: parent

        DragHandler {
            acceptedButtons: Qt.RightButton
            target: sourceImage
            xAxis.enabled: true
            yAxis.enabled: true
            // 限制拖动范围，避免图片完全移出容器
            xAxis.min: imageRect.width - sourceImage.width
            xAxis.max: 0
            yAxis.min: imageRect.height - sourceImage.height
            yAxis.max: 0
        }

        Image {
            id: sourceImage
            source: "qrc:/2.jpg"
            
            // 计算缩放比例：取宽/高方向缩放值的最大值，确保填满容器
            property real scaleFactor: Math.max(imageRect.width / sourceSize.width, imageRect.height / sourceSize.height)
            width: sourceSize.width * scaleFactor
            height: sourceSize.height * scaleFactor
            
            // 初始状态让图片居中显示
            x: (imageRect.width - width) / 2
            y: (imageRect.height - height) / 2

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    print(mouse.x, mouse.y)
                    print(sourceImage.x, sourceImage.y)
                }
            }
        }
    }
}

场景2：图片完整显示在容器内（无裁剪，留白） #

如果需要图片完整显示、不超出容器范围，仅需修改缩放比例的计算方式，取宽/高方向缩放值的最小值：

// 修改Image内的scaleFactor属性
property real scaleFactor: Math.min(imageRect.width / sourceSize.width, imageRect.height / sourceSize.height)

• 缩放比例计算：通过Math.max/Math.min确保图片按原始宽高比适配容器，避免拉伸变形
• 拖动范围限制：在DragHandler中设置坐标轴的最大/最小值，防止图片被拖出容器视野
• 初始居中：通过计算x/y值让图片在容器内居中显示，提升初始体验

内容的提问来源于stack exchange，提问作者andywang