由於圖像加載，Material UI Grid 項目向上推

Question

當我在一個項目中使用 Material UI 網格系統時，我正在使用 create-react-app。 我有兩個彼此相鄰的網格項目。 看起來像這樣：

這正是我想要的。 由於某些原因; 但是，當頁面加載一瞬間，右側的文本會被向上推並閃爍，如下所示： 我懷疑這是因為圖像尚未完全加載，因此文本位於較高位置，直到圖像加載。 任何有關如何防止這種情況的建議或建議將不勝感激！！

這是一個代碼沙箱，用於重新創建https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js

如果您在代碼沙箱全屏時從主頁 go 到 /portfolio，您將看到我正在談論的無樣式內容的 flash。

      <Grid container justify='center' alignItems='center'>
        <Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
          <img src={JobTracker} alt='jobtracker' style={{ width: '100%' }} />
        </Grid>

        <Grid item xs={12} sm={9} md={9} lg={6} xl={6}>
          <Container maxWidth='xs'>
            <Typography variant='h3' style={{ textAlign: 'center' }}>
              JobTracker
            </Typography>
            <br />
            <Typography variant='body2'>
              A platform that allows recent graduates from Wyncode Academy to
              track job applications. Technologies used: ReactJS, NodeJS, Google
              Cloud Functions, and Google Firestore.
            </Typography>
         </Container>
        </Grid>
      </Grid>

Answer 1

根據我的經驗，我通常將圖像包裝在具有固定比例（對我來說通常是黃金比例）的包裝器中，以防止這種行為。 這是因為，只要圖像尚未加載，圖像容器（在您的情況下是Grid組件）的高度為零。

如果您使用固定比率包裝器方法，則圖像包裝器始終具有高度。 而已。 您可以在此處閱讀有關該技術的更多信息： https://css-tricks.com/aspect-ratio-boxes/