1

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

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} 时工作正常。它看起来如何

<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>

但我会有不同高度的图像

当我尝试做自动高度时，结果是这样的

<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>
4

1 回答 1

0

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

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

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

于 2021-07-20T15:04:50.657 回答