由于图像加载，Material UI Grid 项目向上推

Question

当我在一个项目中使用 Material UI 网格系统时，我正在使用 create-react-app。我有两个彼此相邻的网格项目。看起来像这样：

这正是我想要的。由于某些原因;但是，当页面加载一瞬间，右侧的文本会被向上推并闪烁，如下所示： 我怀疑这是因为图像尚未完全加载，因此文本位于较高位置，直到图像加载。任何有关如何防止这种情况的建议或建议将不胜感激！

这里是一个代码沙箱，用于重新创建https://codesandbox.io/s/nifty-jang-kbbty?file=/src/pages/Home.js

如果你在代码沙箱全屏时从主页转到/portfolio，你会看到我所说的无样式内容的闪烁。

      <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/