css网格中的图像拟合答案

【问题标题】：Image fitting in css gridcss网格中的图像拟合
【发布时间】：2021-11-09 13:33:00
【问题描述】：

我对 HTML 和 CSS 不是很熟悉，在解决问题时遇到了一些问题。

我正在尝试将图片精确地放在网格上，并且网格实际上在页面的中心可见。

我看到有很多关于此的问题，我尝试查看问题的答案并尝试解决我的问题，但它实际上不起作用。所以我希望任何人都可以帮助我。

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item"><img src="6.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="3.png" class="img"> </div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="3.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="7.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="3.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="4.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"></div>
        <div class="grid-item"><img src="2.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="4.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="4.png" class="img"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="8.png" class="img"></div>
        <div class="grid-item"></div> 
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>  
        <div class="grid-item"><img src="5.png" class="img"></div>
        <div class="grid-item"></div>
        <div class="grid-item"><img src="9.png" class="img"></div>  
      </div>
</body>
</html>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;

}
.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding: 40px;
  text-align: center;
}
.grid-item > img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

【问题讨论】：

您的 img 有很多填充 - 这是您想要的还是您希望 img 填充网格正方形？
@AHaworth 是的，我希望 img 填充网格正方形并看起来不错
如果你想让每个 img 填充它的网格正方形，你可以使用对象匹配覆盖来做到这一点，但是如果你给它所有的填充，它只会在它的正方形内看起来非常小。你想要填充吗？

标签： html css image css-grid

【解决方案1】：

好的，你可以这样做：

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #8B38BE;
  padding: 70px;
  margin: auto;
  width: 700px;

}
.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding: 40px;
  text-align: center;
  position:relative;
}
.grid-item > img {
  width: 100%;
  object-fit: cover;
  display: block;
  position:absolute;
  left: 0;
  top: 0;
  height: 100%;
}

所以在这种情况下，您将 img 放置为绝对值，并且高度和宽度与网格项相同。但随后您将添加object-fit，这将使图像很好地适合网格项。

【讨论】：

brate，它适用于某些图像，但对于其中一些图像，它们与网格的高度非常相似，但它并没有完全填充网格（宽度）。有什么想法吗？
你的意思是图片比 grid-item 大并且被裁剪了吗？
尝试删除 max-width 并用 width 更改它？
没有图像没有变得比网格项更大，只是其中一些非常适合，其中一些就像“裁剪”一样，图像显示完整，但没有填充宽度网格的高度还可以。我希望我解释得对。
完美，它现在可以工作了，hvala。

【解决方案2】：

我不会使用.grid-item > img {}，而是将它定义为一个类（因为你告诉它，它有一个 .img 类。此外，删除填充并使用 height:100%

.img {
  max-width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  display: block;
}

【讨论】：

【解决方案3】：

这里我使用了纵横比。请在您的代码中更新下面的 css。

.grid-item {
  background-color: #E0E7FF;
  border: 1px solid black;
  padding-bottom: 100%;
  text-align: center;
  position: relative;
}
 .grid-item > img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

【讨论】：

【解决方案4】：

据我了解，您正在尝试使网格居中，但有多种方法可以做到这一点，我不确定您的样子。我不确定它是否加载任何 CSS 或根本不做任何事情。如果你愿意，你可以制作一个包含所有内容的 div 并执行以下操作：

.grid {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

【讨论】：