QML技术问题：锚定到fillMode缩放后Image的实际显示位置

我完全懂你的痛点：当Image用anchors.fill: parent铺满父容器，但因为图片比例和父容器不匹配，实际显示的图片内容并没有完全占满父容器，这时候直接把Text锚定到父容器底部，就会偏离图片的真实底部位置。

这里有两种实用的解决方案，你可以根据自己的场景选择：

方案1：利用Image的contentItem锚定（推荐） #

Qt Quick的Image组件内部自带一个contentItem，它就是承载实际图片内容的元素，它的尺寸和位置完全对应图片真实显示的区域。你可以直接把Text的底部锚定到这个contentItem的底部，同时让Text水平居中对齐图片：

Item {
    // 你的父容器，尺寸未知
    width: 400
    height: 300

    Image {
        id: img
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit // 保持图片比例，这是关键设置
        source: "your-image-path.png"
    }

    Text {
        text: "这是图片底部的文字"
        anchors.bottom: img.contentItem.bottom
        anchors.horizontalCenter: img.contentItem.horizontalCenter
        color: "white"
        background: Rectangle { color: "black"; opacity: 0.7 }
    }
}

不管图片是横向还是纵向，Text都会精准贴在图片真实显示区域的底部，完全不受父容器空白区域的影响。如果你的Image用的是PreserveAspectCrop裁剪模式，这个方案同样适用，因为contentItem会对应裁剪后的显示区域。

方案2：用辅助容器包裹Image和Text #

如果你的场景不适合直接使用contentItem，可以把Image和Text放在一个Item里，先让这个辅助容器的大小匹配图片的真实显示尺寸，再把容器居中到父组件：

Item {
    width: 400
    height: 300

    Item {
        id: imgWrapper
        anchors.centerIn: parent
        // 计算容器尺寸，匹配图片比例和父容器的适配结果
        width: Math.min(parent.width, img.sourceSize.width * parent.height / img.sourceSize.height)
        height: Math.min(parent.height, img.sourceSize.height * parent.width / img.sourceSize.width)

        Image {
            id: img
            anchors.fill: parent
            fillMode: Image.Stretch // 容器已匹配比例，直接拉伸即可
            source: "your-image-path.png"
        }

        Text {
            text: "图片底部文字"
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            color: "white"
        }
    }
}

这个方案的核心是通过图片源尺寸和父容器的比例计算，让辅助容器刚好适配图片的显示大小，这样Text锚定到容器底部就等于锚定到图片底部。

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