immagine gatsby reattiva nel contenitore flexbox

Aug 22 2020

Sto lottando per far funzionare Gatsby-Image con flexbox in modo reattivo:

Vorrei che tutte le mie immagini abbiano le stesse dimensioni e altezza e dovrebbero essere reattive per dispositivi mobili e desktop.

È questo il caso d'uso dell'immagine di Gatsby?

L'unico modo in cui ho potuto farlo vedere era aggiungere una correzione minWidth:

<div className={styles.header}>
  <GatsbyImage className={styles.image} fluid={image.fluid} style={{ minWidth: '100px' }} />

Ho provato ad aggiornare la graphQlquery a

          fluid(maxWidth: 100) {
            ...GatsbyContentfulFluid
          }
    

Non c'è minWidth solo maxWidth.

Chiaramente mi manca totalmente come usarlo.

Come posso usare gatsby-image in un contenitore flexbox e voglio che tutte le immagini abbiano le stesse dimensioni e altezza.

Risposte

WillWard Aug 23 2020 at 05:23

Non ho usato Gatsby Image con Contentful, ma di solito per Gatsby Image racchiudo ogni componente dell'immagine in un div e controllo le dimensioni in questo modo.

import Img from "gatsby-image"

...

<div className="img-wrap">
    <Img fluid={image.childImageSharp.fluid} style={{width: "100%"}} />
</div>

// CSS

.img-wrap {
    width: 15vw;
}

Il bit "childImageSharp" nella mia query GraphQL è in linea con la documentazione standard di Gatsby; potrebbe non essere rilevante per il tuo caso utilizzando Contentful.