画像の読み込みにより、マテリアルUIグリッドアイテムが上に押し上げられました

debugcn 投稿 Dev

ロブ・テレル

プロジェクトでMaterialUIグリッドシステムを使用しているときは、create-react-appを使用しています。互いに隣接する2つのグリッドアイテムがあります。それはそのように見えます：

これはまさに私が欲しいものです。何らかの理由で; ただし、ページが一瞬読み込まれると、右側のテキストが上に押し上げられ、スタイルが設定されていない状態で点滅します。画像が完全に読み込まれていないため、画像が読み込まれるまでテキストが上に表示されるためと思われます。これを防ぐ方法についてのアドバイスや提案をいただければ幸いです!!

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>

ShinaBR2

私の経験では、この動作を防ぐために、通常、画像をラッパーでラップします。比率は固定されています（通常は黄金比）。これは、画像が読み込まれていない限り、画像コンテナ（この場合はGridコンポーネント）の高さがゼロであるためです。

固定比率ラッパーアプローチを使用する場合、画像ラッパーには常に高さがあります。それでおしまい。この手法の詳細については、https：//css-tricks.com/aspect-ratio-boxes/を参照してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事