Wie werden sowohl Hoch- als auch Querformatbilder in einem Quadrat im Raster angezeigt, ohne das Seitenverhältnis zu beeinträchtigen?

Question

Ich verwende eine GridView, um eine Galerie von Bildern zu erstellen, die ich aus einem bestimmten Ordner auf meinem Computer anzeigen. Die Bilder haben unterschiedliche Breite * Höhenverhältnisse. Wenige sind Porträtbilder, bei denen die Höhe des Bildes 3 mal größer ist als die Breite. Einige Bilder sind Landschaft wie, wo die Breite ca. 3 mal der Höhe ist. Und einige Bilder sind quadriert.

Das Problem mit meiner Galerie ist ich einen Platz für jeden Image Bestandteil meiner GridView haben, wie Sie unten sehen können. Dadurch werden die Querformatbilder des Portraits & falsch gedehnt, da jeder Block im Raster ein Quadrat ist. Dadurch wird das Seitenverhältnis des Bildes verzerrt.

Die Frage: Wie kann ich sicherstellen, dass ich ohne verkanten dem Seitenverhältnis beider Portraits & Landschaftsbilder in meinen Platz sehen? Ich suche einen schwarzen/grauen Hintergrund auf Teile des Quadrats, die auf einem Portrait- oder Landschaftsbild leer sind. Aber es könnte andere Tricks geben.

Der 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 
} 

Answer 1

Stellen Sie einfach ImagefillMode Eigenschaft Image.PreserveAspectFit Als doc sagt:

das Bild gleichmäßig ohne Zuschneiden