我对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;
}
好吧，你可以这样做：
.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，这将使图像很好地适应网格项。
我不使用.grid-item > img {}，而是将其定义为一个类(因为你告诉它，它有一个.img类。此外，删除填充并使用高度：100%
.img {
max-width: 100%;
height: 100%;
padding: 0;
object-fit: cover;
display: block;
}
这里我使用了纵横比。请在您的代码中更新以下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;
}
据我所知，您正试图将网格居中，但有多种方法可以做到这一点，我不确定您的外观如何。我不确定它是否加载了任何CSS或根本不做任何事情。如果你想的话，你可以制作一个包含所有内容的div，并做一些类似的事情：
.grid {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
}