1

当我在一个项目中使用 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>
4

1 回答 1

0

根据我的经验，我通常将图像包装在具有固定比例（对我来说通常是黄金比例）的包装器中，以防止这种行为。这是因为，只要图像尚未加载，图像容器（在您的情况下是Grid组件）的高度为零。

如果您使用固定比率包装器方法，则图像包装器始终具有高度。而已。您可以在此处阅读有关该技术的更多信息：https ://css-tricks.com/aspect-ratio-boxes/

于 2020-07-05T03:07:29.273 回答