使图像适合 CSS Grid

Question

我有一个网格，我在其中放置图像，但它们并没有填满给定的整个空间。

我希望下图能很好地说明问题。 正如我们所看到的，顶部图像和右侧图像没有填充它们分配的行。 是什么原因造成的，我该如何解决？

代码是这样的：

 <section class="wrapper">
   <div class="one">
     <img class="img" src="images/lorem/ipsum.jpg" alt="">
   </div>

   <div class="two">
     <img class="img" src="images/lorem/ipsum2.jpg" alt="">
   </div>

   <div class="three">
     <img class="img" src="images/lorem/ipsum3.jpg" alt="">
   </div>
 </section>

 .wrapper {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   grid-auto-rows: minmax(150px, auto);
   grid-gap: 20px;
   height: 100vh;
 }

.one {
  grid-column: 2 / 7;
  grid-row: 1 / 3;
}

.two {
  grid-column: 2 / 5;
  grid-row: 3 / 4;
} 

.three {
  grid-column: 5 / 7;
  grid-row: 3 / 4;
}

.img {
  width: 100%;
}

我怎样才能解决这个问题？

Answer 1

添加一个 div 来包裹你的图像，然后将图像样式设置为 .img { max-width: 100%; 高度：自动 }

Answer 2

我之前遇到过类似的问题，简单的解决方案是将高度或宽度设置为 100%，以便 img 元素填充其容器。 然后将对象适合属性设置为覆盖以便更好地裁剪。 您甚至不需要 div 容器来存储图像。 像这样：

网格容器将负责单元格的定位。

 img{ width: 100%; height: 100%; object-fit: cover; }

Answer 3

这是正常的，因为图像保留了它们的纵横比。

解决这个常见问题的一个好方法是将图像设置为网格中 div 中的 CSS-background 参数，而不是 html 中的<img>标签，例如 background: url(' http://link-to- your-image/image.jpg ') 并使用background-size: cover; 在同一个元素上。

这样，图片将填满归属于它的所有空间。

Answer 4

尝试 background-size: 100% 100% 和 background-size: cover or fit

Answer 5

这对我使用带有内联样式的 React 很有用：

<div 
    style = {{
        gridArea: "image",
        backgroundImage: `url(${imageFromImports})`,
        backgroundSize: "contain",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
    }}
/>

Answer 6

我终于发现了在 CSS 网格中动态调整图像大小的规则。 他们是：

1. 父网格的每个嵌套网格元素都必须设置min-height: 0 ，包括img标签本身
2. img标签还必须定义max-width: 100%
3. img标记的直接网格父级还必须设置min-width: 0以使align-和justify-属性正常工作

这是可以工作的示例代码：

// parent
<div css={{
    display: "grid",
    gridTemplateRows: "max-content 1fr",
    height: "50vh",
    maxHeight: "50vh",
}}>
    <header></header>

    <div css={{
      display: "grid",
      gridTemplateRows: "3fr 2fr",
      minHeight: 0,
    }}>
        <div css={{
          display: "grid",
          minHeight: 0,
          minWidth: 0,
        }}>
            <img
                css={{
                  maxHeight: "100%",
                  minHeight: 0,
                  borderRadius: 10,
                }}
            />
        </div>

        <div css={{
          display: "grid",
          minHeight: 0,
        }}>
            {imgs.map(img => 
                <div css={{
                  display: "grid",
                  minHeight: 0,
                  minWidth: 0
                }}>
                    <img
                        css={{
                          maxHeight: "100%",
                          minHeight: 0,
                          borderRadius: 10,
                        }}
                    />
                    <p>...</p>
                </div>
            }
        </div>
    </div>
</div>