How to avoid page jumps with d-flex.

[kkvero]

I have responsive images in cards, which are wrapped in d-flex. On bigger screens it is 2 cards per row, on smaller screens wraps to 1 card per row. When page is loading, the first image loads to 90% of the screen, then jumps to its right position of 50% of the screen. While other cards first appear very narrow with white squares.

How can such jumps be avoided?
(Preserve page structure. First image should take 50% of the page when page loads.)

I also introduced loading very light blurry images first using CSS, but it did not resolve the issue entirely.

Code for the initial d-flex card structure (first 2 cards):

<div class="d-flex flex-wrap flex-sm-nowrap m-2">
  <div class="card">
    <img width="1000" height="780" src=".."  class="card-img img-fluid" loading="lazy" />
    <div class="card-img-overlay align-self-end text-end">..
    </div>
  </div>

  <div class="card">
    <img width="1000" height="780" src=".." loading="lazy" class="card-img img-fluid" />
    <div class="card-img-overlay align-self-end">
      <div class="d-inline-flex">
        <p class="card-title">..</p>
      </div>
    </div>
  </div>
</div>

[patkon]

Drop 'width' and 'height' from the Tag and it should work

[kkvero]

Thank you for responding!
Unfortunately, removing width, height did not help. The image of the first card still covers the whole screen on loading. (And I did clear the cache when testing.)

[kkvero]

Adding min-width helped somewhat :)