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

Question

I am using a GridView to create a gallery of images that I display from a certain folder on my machine. The images are of different width*height ratios. Few are portrait images where the height of the image is like 3 times more than width. Some image are landscape like where the width is approx 3 times of height. And some images are squared.

The issue with my gallery is I have a square for each Image component of my GridView as you can see below. This makes the portrait & landscape images get incorrectly stretched as each block in the Grid is a square. Thus causing the aspect ratio of the image to get skewed up.

The Question: How can I ensure that I display both portrait & landscape images into my square without skewing the aspect ratio? I am looking at putting some black/grey background on parts of the square which go blank on a portrait or landscape image? But there might be other tricks.

The code:

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
}

Have you tried to use `fillMode: Image.PreserveAspectFit` on Image ? — Macias, Sep 05 '17 at 19:32

score 1 · Accepted Answer · answered Sep 05 '17 at 19:55

1

Just set Image fillMode property to Image.PreserveAspectFit As the doc says:

the image is scaled uniformly to fit without cropping

answered Sep 05 '17 at 19:55

Macias

657
4
16

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

1 Answers1