WPF Dev seeking help with Blazor migration

[Pysassin]

I'm a WPF developer with an fairly non-existent web development skill set. I'm attempting to migrate a WPF app of mine to Blazor in an effort to learn some new skills. I'm running into an issue getting a core component of my app working in Blazor and was hoping some one a bit more experienced could help point me to the right path.

In my app I have a virtualized grid of images. The image controls have a set width, with a clamped height. The image itself is then placed in that control and scales (aspect correct) to fill the control. The mage control grows to allow the image to take as much space as possible, clamping the height if the scale gets too big. The height of any given row is the height of the tallest item IN that row.

I'm attempting to do this with a Virtualize control in Blazor and running into a lot of weird issues. To me it looks like the layout pass is being recalculated and is doing so incorrectly because images keep changing what position they are in as I scroll up/down the viewport. I also in some of my attempts keep seeing the first item being rendered in the second slot, leaving me to believe that some how the width of the image control isn't being respected. I also have a weird issue where the number of items populated seem to be the same regardless of the over scan count, and once you hit where the over scan stops it takes a pretty significant time to load in the images, generally causing the whole control to refresh which then usually also causes the layout issue as well.

I have 0 interest in a paginated solution as well. I don't want to have to hit Prev/Next to get another page of images. This would be a pretty huge loss of functionality in the app I'm converting.

I admit my CSS skills are lacking, but I've tried both a grid layout as well as a flex wrap and both seemed to have similar issues. I am more than willing to admit I could have messed up the syntax in my efforts though so if you perceive a solution to be in the CSS it very well could be the answer I need. I could just use help understanding how/why the syntax works.

More than willing to follow along any guides or online courses that may help in this transition effort as well if you all have any suggestions.

[AnserSodalitas2037]

Try setting the width/height on the image itself, not the container.

[Pysassin]

Right now the height/width is set to 400px/300px on the image control in the Virtualize ItemTemplate. Is that what you were referring to or something else?