使图像适合 CSS Grid答案

【问题标题】：Make image fit CSS Grid使图像适合 CSS Grid
【发布时间】：2018-05-26 12:12:03
【问题描述】：

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

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

代码是这样的：

 <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%;
}

我该如何解决这个问题？

【问题讨论】：

您应该包含 HTML，以便我们重现问题。这些帖子可能会有所帮助：here 和 here。
也许设置为 150px 的 minmax 太大了？你能用你的 HTML 结构和图像大小来说明你的问题吗......也许它也与 HTML 有关？
@G-Cyr 我确实添加了 HTML。 Yan 建议的修复方法可以解决间隙问题，但现在当我调整图像大小时，图像会被剪切
图片可以看css-tricks.com/almanac/properties/o/object-fit（效果与背景大小相似）。问题是，要使图像填充整个单元格网格，您将不得不切断其中的一部分或拉伸它们。如果他们的尺码一开始不合适。你想拉伸它们吗？
不，我不想拉伸它们。他们应该保持他们的纵横比。感谢您的链接！

标签： html css css-grid

【解决方案1】：

添加一个 div 来包裹您的图片，然后将图片样式设置为 .img { 最大宽度：100%；高度：自动 }

【讨论】：

你的意思是 .div-name img{width:100%;高度：100%;}
HTML（带有 CSS 网格区域）：

CSS: graph { grid-area: graph;边框：2px 纯深绿色；填充：2px；显示：块；适合对象：封面； } .img{ 最大宽度：100%;高度：自动

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这是正常的，因为图像会保持其纵横比。

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

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

【讨论】：

好的，谢谢你的帮助。我很惊讶。这是解决 CSS Grid 中所需图像问题的唯一方法吗？
'fit-content:cover' 与背景图片类似，但适用于 img 对象

【解决方案4】：

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

【讨论】：