ansprechendes Gatsby-Bild im Flexbox-Container

Question

Ich habe Probleme, Gatsby-Image auf reaktionsschnelle Weise mit Flexbox zum Laufen zu bringen:

Ich möchte, dass alle meine Bilder die gleiche Größe und Höhe haben und dass sie für Mobilgeräte und Desktops geeignet sind.

Ist dies der Anwendungsfall für Gatsby Image?

Der einzige Weg, wie ich es zeigen konnte, war das Hinzufügen eines festen minWidth:

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

Ich habe versucht, die graphQlAbfrage auf zu aktualisieren

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

Es gibt keine minWidth nur maxWidth.

Mir fehlt eindeutig völlig, wie man das benutzt.

Wie kann ich Gatsby-Image in einem Flexbox-Container verwenden und möchte, dass alle Bilder dieselbe Größe und Höhe haben?

Answer 1

Ich habe Gatsby Image nicht mit Contentful verwendet, aber normalerweise verpacke ich für Gatsby Image jede Bildkomponente in ein Div und steuere die Größe auf diese Weise.

import Img from "gatsby-image"

...

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

// CSS

.img-wrap {
    width: 15vw;
}

Das 'childImageSharp'-Bit in meiner GraphQL-Abfrage entspricht genau der Standarddokumentation von Gatsby. Es ist möglicherweise nicht relevant für Ihren Fall, Contentful zu verwenden.