How to avoid layout disrupt due to image render?-CodePudding

I'm working on this website => https://https://dev.web.redpadel.com and I'm having a little unwanted behaviour in the following screen => https://dev.web.redpadel.com/about, you can see the issue doing a f5, until the image loads the text get rendered up and then it's pushed by the img, how could I solve it in order to have a clean render? Thank you very much in advance, and any suggestion is welcome. The project is being done with vuejs and Tailwind, heres the <mainLayout / and the <About files code:

<template>
  <div
    ref="main"
    
  >
    <div >
      <Header : />
      <main>
        <div>
          <router-view
            
            :style="{ height: getScreenHeight }"
          />
        </div>
      </main>
      <Footer />
    </div>
  </div>
</template>

About:

<template>
  <div >
    <div >
      <div >
        <img
          
          :src="require('../assets/img/about-hero.jpg')"
          alt="about image"
        />
      </div>
      <div
        v-motion
        :initial="{ opacity: 0, y: 100 }"
        :enter="{ opacity: 1, y: 0, scale: 1 }"
        :delay="100"
        
      >
        <h1
          
        >
          {{ t('aboutUs') }}
        </h1>

        <p
          
        >
          {{ t('aboutUsDesc') }}
        </p>
      </div>
    </div>
    <div >
      <div >
        <div >
          <p
            
          >
            {{ t('ourMission') }}
          </p>

          <!-- use translations to replace template text -->
          <p
            v-for="text in textAbout"
            :key="text"
            
          >
            {{ text }}
          </p>
        </div>
      </div>
    </div>
    <QuoteSlider />
  </div>
</template>

<style>
.padel-img {
  width: 90%;
  max-width: 1560px;
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: unset;
    width: 80%;
  }
}
</style>

CodePudding user response：

Add height and width dimensions to your image. This will tell the browser to reserve that much space.