HTML 图像网格图像不在网格中

Question

我对 css 网格非常陌生，无论出于何种原因，我都很难让我的图像落入网格。他们似乎代表我的网格顶部而不是内部..任何帮助将不胜感激..

我在边框上添加了颜色来勾勒出我想要的形状和东西。

* {
  width: 100% margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid-container {
  width: 100% position: absolute;
  display: grid;
  height: 100vh;
  border: 10px solid green;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-items: flex-center;
}

.grid-item {
  background-color: Grey;
  border: 4px solid orange;
  padding: 10px;
  font-size: 30px;
}

.container2 {
  object-fit: cover;
  max-width: 50% height:auto;
}

.grid-container .image {
  position: relative;
  max-width: 100%;
  height: auto;
}

.div1 {
  grid-area: 1 / 1 / 3 / 3;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.div2 {
  grid-area: 1 / 3 / 2 / 4;
  max-width: 100%;
}

.div3 {
  grid-area: 1 / 4 / 2 / 5;
  max-width: 100%;
}

.div4 {
  grid-area: 1 / 5 / 2 / 6;
  max-width: 100%;
}

.div5 {
  grid-area: 2 / 3 / 3 / 4;
  max-width: 100%;
}

.div6 {
  grid-area: 2 / 4 / 3 / 5;
  max-width: 100%;
}

.div7 {
  grid-area: 2 / 5 / 3 / 6;
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item div1">
    <div class="container2">

      <img src="https://www.wendtcorp.com/wp-content/uploads/2020/08/Sikirica-600x600-1.jpg" alt="Srdjan Sikirica" class="image"> </img>

      <div class="overlay">Srdjan Sikirica</div>
    </div>

  </div>
  <div class="grid-item div2">Test2

  </div>
  <div class="grid-item div3 ">test3

  </div>
  <div class="grid-item div4 ">test4

  </div>
  <div class="grid-item div5">test5

  </div>
  <div class="grid-item div6 ">test6
  </div>
  <div class="grid-item div7">test7

  </div>

我看了一些视频，就我所知，我仍在学习如何以及何时将课程和东西结合起来。我做了一些很好的搜索，大多数人只是将信息摘要放在一起，这根本没有帮助。

感谢您提供的所有帮助！

Answer 1

这是你想要的吗？

我添加了object-position: 0% 0%;如果您希望图像位于中心，则需要使用 50% 50%

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