如何在不影响宽高比的情况下将纵向和横向图像显示为网格上的正方形？

Question

我正在使用 GridView 创建一个图库图像，这些图像是我从计算机上的某个文件夹中显示的。 图像具有不同的宽*高比。很少有人像图像的高度是宽度的 3 倍。有些图像是横向的，例如宽度大约是高度的 3 倍。有些图像是方形的。

我的画廊的问题 是我的 GridView 的每个 Image 组件都有一个正方形，如下所示。这使得纵向和横向图像被错误地拉伸，因为网格中的每个块都是一个正方形。从而导致图像的纵横比偏斜。

问题： 如何确保在不扭曲宽高比的情况下将纵向和横向图像显示到我的正方形中？我正在考虑将一些 black/grey 背景放在正方形的某些部分上，这些部分在肖像或风景图像上会变成空白？但可能还有其他技巧。

代码：

import QtQuick 2.5
import Qt.labs.folderlistmodel 2.1
import QtQuick.Controls 1.1
import QtQml.Models 2.1

GridView {
  cellHeight: height/2
  cellWidth: width/2
  clip: true

  FolderListModel {
    id: dir_model
    folder: "/path/to/images/folder"
    nameFilters: ["*.png"]
  }

  Component {
    id: file_delegate

    Image {
        width: (parent.width)/2
        height: (parent.width)/2
        source: fileURL
    }
  }

  model: dir_model
  delegate: file_delegate
}

Answer 1

只需将 Image fillMode 属性设置为 Image.PreserveAspectFit 正如文档所说：

the image is scaled uniformly to fit without cropping

如何在不影响宽高比的情况下将纵向和横向图像显示为网格上的正方形？

How to display both portrait & landscape images into a square on the grid without disturbing the aspect ratio?

qt

gridview

image

image-gallery

qml