immagine gatsby reattiva nel contenitore flexbox
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 graphQl
query 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
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.