How to show several images with different aspect ratio?

[Frank1126lin]

I am writing the GUI software on WIN 11 with Rust, thus I have different kinds of images to show, with different aspect ratio, how I lock the aspect ratio to show the images.
If I write as below, the images apect ratio was changed.

Image {
            width:  100%;
            height: 100%;
            source: root.img;
        }

Well, if I just write the width, some of the images shows right, but with a long image, the height is much bigger than the rectangle.

 Image {
            width:  100%;
            source: root.img;
            // implicit default, preserving aspect ratio:
            // height: self.width * natural_height / natural_width;
        }

How do I fix that? anyone can help?

[hunger]

Here is a link to Slintpad with a demo code snippet.

I used the SLint logo, which is wider than it is high, but the same applies in the other direction, too.

If you remove the width: 100%;, then the image is free to select whatever width is appropriate for the given height (with parts of it being cut away again).

When you constrain both width and height, then the image will be trimmed down to fit into the assign space. Note that I had to specify image-fit to tells lint to preserve the aspect ratio.

[Frank1126lin]

Well,what I want to do is to show the different images in it's own aspect ratio, How can I lock the aspect ratio in slint?
For Example, I write a sample in slintpad like this.
I want to show both of them in one type component, with its own aspect ratio, but I cann't do it in slint. The image's aspect ratio was changed if I write both width and height. otherwise, if I only write the width, the second image was too high to show in the box.

[ogoffart]

Do you mean something like

height: self.width * self.source.height / self.source.width;

[Frank1126lin]

Yeah, I tried, it works in keep the aspect ratio, but the height still longer than the box in this slintpad demo.
So, is there anyway to set the max width or max height for these images? thus these images can be set by its own to keep the size and aspect ratio.

[hunger]

@Frank1126lin: Add image-fit: contain; into the Image in your Photo.

Slintpad

[bjorn]

I'm unable to reproduce @Frank1126lin's issue, even when explicitly specifying ImageFit.fill. What could be causing that?

I was a little confused by the problem and the provided solution, since to me the result looks exactly the same.

[hunger]

This bit of code:

        Image {
            width:  100%;
            height: 100%;
            source: img;
            image-fit: contain;
        }

renders this:

This is the code I got from @Frank1126lin:

        Image {
            width:  100%;
            height: self.width * self.source.height / self.source.width;
            source: img;
        }

which renders like this:

[Frank1126lin]

Yep, I got the right result using image-fit: contain, Thanks for help. by the way, what I wonder was that is the contain was default set by Doc?
image-fit (in enum ImageFit): Specifies how the source image shall be fit into the image element. (default value: contain when the Image element is part of a layout, fill otherwise)

[bjorn]

@hunger I get that, but what I was saying, is that I can't reproduce this reported behavior: "If I write as below, the images apect ratio was changed.". It seems on my end (testing this on Firefox), I can't get it to show images with changed aspect ratio at all.