文章/答案/技术大牛

发布

社区首页 >问答首页 >由于图片加载而向上推送的Material UI Grid项

问由于图片加载而向上推送的Material UI Grid项
EN

Stack Overflow用户

提问于 2020-07-05 08:51:26

回答 1查看 163关注 0票数 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>

css

reactjs

material-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-05 11:07:29

在我的经验中，我通常将图像包装在有固定比例的包装器中(对我来说通常是黄金比例)，以防止这种行为。这是因为，只要图像尚未加载，图像容器(在本例中为Grid组件)的高度就为零。

如果您使用固定比例的包装器方式，图片包装器总是有一个高度。就这样。您可以在此处阅读有关该技术的更多信息：https://css-tricks.com/aspect-ratio-boxes/

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62735815

复制

相似问题

问由于图片加载而向上推送的Material UI Grid项
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问由于图片加载而向上推送的Material UI Grid项EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问由于图片加载而向上推送的Material UI Grid项
EN