next js Image 100% width and proportional height

user_14955687 0
Viewed 3380

I can't get the automatic proportionately height of the image

scss grid: works fine

.blocks {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
      row-gap: 100px;
      column-gap: 18px;
      @media screen and (max-width: 1400px) {
        column-gap: 8px;
      }
      align-items: stretch;
      @media screen and (max-width: 1450px) {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      }
      @media screen and (max-width: 1000px) {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      }

Works fine while i have static width={900} and height={600}. How it looks

<div className={styles.blocks}>
                {images.map((i) => <div key={i.url} className={styles.block}>
                    <Link href={`work/${i.id}`}><a>
                        {i.previewType === "video"
                            ? <video style={{width: "100%", objectFit: "cover"}} playsInline autoPlay muted loop><source src={i.url} type="video/mp4"/>
                            </video>
                            :   
                            <Image width={900} height={500} src={i.url} alt={i.title}/>}
                        <div className={styles.block__about}><h2>{i.title}</h2><p>{i.about}</p></div>
                    </a></Link>
                </div>)}
            </div>

But I will have images of different height

And when I try to do auto height it turns out like this

<div className={styles.blocks}>
            {images.map((i) => <div key={i.url} className={styles.block}>
                <div style={{position: "relative"}}>
                    <Link href={`work/${i.id}`}><a>
                        {i.previewType === "video"
                            ? <video style={{width: "100%", objectFit: "cover"}} playsInline autoPlay muted loop>
                                <source src={i.url} type="video/mp4"/>
                            </video>
                            :
                            <Image layout={"fill"} className={styles.block__image} src={i.url} alt={i.title}/>}
                        <div className={styles.block__about}><h2>{i.title}</h2><p>{i.about}</p></div>
                    </a></Link>
                </div>
            </div>)}
        </div>
nextjs-image next.js reactjs image
1 Answers

When you use next Image with layout='fill', then the image will fill the space of first parent element with position relative. Your div, which contains image, has position relative, but doesn't have fixed width and height.

  1. Its width is determined by parent 'blocks' grid element, because of rule grid-template-columns. Columns are about width, not height.
  2. Its height is determined by height of child div with h2.title and p.about. That's why it is so small and wide.

The best solution in your case would be to just set up fixed height and width on div with position relative, and adjust its values with media-queries on various resolutions. Give it a className and setup css rules position, width, height, don't mix inline styles with the one from css file.

user_103385920
Related