如何使下一个/图像填充可用的网格空间？

Posted 2023-03-06

【中文标题】如何使下一个/图像填充可用的网格空间？

【英文标题】：How to make next/image fill available grid space?

【发布时间】：2022-01-16 23:00:40

【问题描述】：

如何使next/image 跨越网格 1 到 8？当我使用img 标签尝试它时，它可以工作，但使用next/image 它不会。

.project 
  display: grid;
  margin-bottom: 4rem;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;


.project-img 
  grid-column: 1 / span 8;
  grid-row: 1 / 1;
  height: 30rem;
  border-radius: 0.25rem;
  box-shadow: 0 5px 15px rgb(0 0 0 / 20%);

<article className='project'>
  <img
    src=img
    className='project-img'
    alt=title
    height='100%'
    width='100%'
  />
  <div className='project-info'>....</div>
</article>

---

使用next/image

使用img标签

【参考方案1】：

我相信您在这里有一些解决方案。首先让我建议你在this 网站上花一点时间练习css grid，非常有帮助。我看到的第一个解决方案是您的行在同一个“框”处开始和结束。不应该是这样的。它应该以 2 结尾，因为它指定了它以但不包括的“框”结尾。第二种解决方案是在您要设置样式的 next/image 上使用 grid-area 属性。看起来像这样：

.project-image
  grid-area: 1/1/2/8;

这指定行从 1 开始，列从 1 开始，行在 1 结束，列在 8 结束。您还可以将 grid-area 属性分解为它的复合属性，grid-row-start、grid-column- start、 grid-row-end 和 grid-column-end。看起来像这样：

.project-image
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 8; 

如果其中一种解决方案对您有用，我鼓励您查看该网站。如果我的答案不起作用，我保证您会在那里找到解决方案！如果我的回答确实有效，它仍然会为您巩固 css 网格的概念。