Virtual Scroll with Dynamic Image Height

Ionic Framework ionic-v3
1

Hey Guys,

I’m struggeling with virtual scroll. As some of you maybe know, virtual scroll seems to be buggy since a long time, but I got it working with a workaround listed here: https://github.com/ionic-team/ionic/issues/9660 “decpio commented on 16 Aug” had a working solution.

Nevertheless, in my case I need to render images which have different heights (eg. landscape/portrait). With virtual scroll I got it just working by passing fixed width and height in pixels directly in the ion-img tag:

<ion-img [src]="foo" [width]="100px" [height]="200px"></ion-img>

But this is not what I need.

Has anyone of you an idea how I can result something like width = window.innerWidth, height dynamically but max-height = window.innerHeight / 1.5 and object-fit: cover? Without ion-img I’m doing this:

In component.ts:

innerWidth = window.innerWidth;
innerHeight = window.innerHeight / 1.5 + "px";

In component.html:

<ion-row>
    <div style="width: 100%;" [style.max-height]="innerHeight">
        <img [src]="foo" [style.max-height]="innerHeight"
               style="width: 100%; height: 100%; object-fit: cover;">
    </div>
</ion-row>

This works on iOS and Android aswell.

In virtual scroll approxItemHeight was set to window.innerHeight and approxItemWidth to window.innerWidth.

The problem is also, that I have no data about the height and width of the image before downloading it. I tried different CSS things but nothing seems to work.

Edit: The wrong result is, that without changing the styles and fixed width/height in pixels, the image is width 100% but height just a fex pixels.

Thanks,
Mike

2

Hello, did you find any solution to this? im facing the same issue :frowning: