-1

new bee here. I am trying something very simple and it is not working and I cannot figure out why.

I am on windows and according to to the documentation, I can easily re-size an image using "fillMode: Image.PreserveAspectFit"

https://doc.qt.io/qt-6/qml-qtquick-image.html

Here is the QML code

import QtQuick

Image {
    id: buttonId
    width: 60
    height: 100
    source: "large1.png"
    fillMode: Image.PreserveAspectFit
}

This is getting included from a parent QML as such:

RowLayout
{
    anchors.centerIn: parent
    spacing: spacerWidth
    
            MyImage {
    }
}

The source image is 334x484 px

enter image description here

but here is what I get when I render the page:

enter image description here

my window is set to 480x272

Window {
    width: 480
    height: 272
    visible: true
    title: qsTr("Test")

What such a simple scaling is not working?

thank you.

gmmo
  • 2,577
  • 3
  • 30
  • 56
  • 1
    If you're using a `Layout`, you must use `Layout.preferredWidth` to define the `width` of the children *since the `Layout` is in responsible of the geometry of the children*, according to the documentation for [Qt Quick Layouts](https://doc.qt.io/qt-6/qtquicklayouts-overview.html#a-simple-layout). – SMR Sep 03 '22 at 11:41
  • 1
    To make it more universal, i.e. to work within Layouts and non-Layouts, try setting implicitWidth and implicitHeight instead. Else you be wondering, is this (1) a width/height situation, or (2) a Layout.preferredWidth/Layout.preferredHeight situation? – Stephen Quan Sep 05 '22 at 00:55

2 Answers2

1

When your component:

  • into Layout - assign to Layout.preferredWidth / Layout.preferredHeight properties
  • not in Layout - assign to width and height properties

User Stephen Quan is not right, because if you're will be using implicit values for define Layout.preferred values - it will be always sourceSize width and height values which correspond original image size (if this was received from filesystem) OR concrete custom values (e.g. from database, or user-defined value) if you received this pixmap from QQuickImageProvider

If you're will be assign values to implicit width/height Image properties - it will be error, because it's a read-only properties

Seenshade
  • 26
  • 1
0

With the user "SMR" help, it scaled properly as below:

Image { id: buttonId fillMode: Image.PreserveAspectFit Layout.preferredWidth: 60 Layout.preferredHeight: 100

gmmo
  • 2,577
  • 3
  • 30
  • 56