reactjs - next js Image 100%宽度和比例高度

Question

我无法获取图像的自动比例高度

scss 网格:工作正常

.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));
      }

当我有静态宽度={900} 和高度={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>

但是我会有不同高度的图片

当我尝试自动调整高度时，结果是 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>

Answer 1

当您使用带有 layout='fill' 的 next Image 时，图像将填充具有相对位置的第一个父元素的空间。您的包含图像的 div 具有相对位置，但没有固定的宽度和高度。

1. 它的宽度由父“blocks”网格元素决定，因为规则是 grid-template-columns。列是关于宽度，而不是高度。
2. 它的高度由带有 h2.title 和 p.about 的子 div 的高度决定。这就是它如此小而宽的原因。

在您的情况下，最好的解决方案是在具有相对位置的 div 上设置固定的高度和宽度，并使用各种分辨率的媒体查询调整其值。给它一个类名并设置 css 规则位置、宽度、高度，不要将内联样式与来自 css 文件的样式混合。