由于图像加载，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/