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

Posted 2023-02-16

【中文标题】如何在不影响纵横比的情况下将纵向和横向图像显示为网格上的正方形？

【英文标题】：How to display both portrait & landscape images into a square on the grid without disturbing the aspect ratio?

【发布时间】：2017-09-05 18:56:55

【问题描述】：

我正在使用GridView 创建一个图库，其中包含我机器上某个文件夹中显示的图像。 图像具有不同的宽*高比。很少有肖像图像的高度是宽度的 3 倍。有些图像是横向的，例如宽度约为高度的 3 倍。有些图像是平方的。

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

问题： 如何确保在正方形中同时显示纵向和横向图像而不会扭曲纵横比？我正在考虑在正方形的某些部分放置一些黑色/灰色背景，而这些部分在纵向或横向图像上会变为空白？但可能还有其他技巧。

代码：

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

【问题讨论】：

你试过在图片上使用fillMode: Image.PreserveAspectFit吗？

完美。这就是我需要的

【参考方案1】：

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

图像被均匀缩放以适应不裁剪