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:
innerWidth = window.innerWidth; innerHeight = window.innerHeight / 1.5 + "px";
<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.