html - grid中的图片超出了的原始空间

Question

我分了我的.grid使用 CSS 网格在 4 列和 4 行中的元素。我调整了图像，使其位于第一列和第四行。但是，正如你所看到的，一个男人的形象超过了原来的高度.grid <div>它重叠并越过它下面的另一个元素。

如何保持图像的原始大小 .grid并将其与第一列和第四行对齐？ (我还希望它粘在那个黑色元素的顶部，但不要与它重叠)。

.grid {
    height: 1000px;
    width: 100%;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%;
}

#image {
    grid-column: 1;
    grid-row: 4;
}

.box {
    background: black;
    height: 500px;
}

<div class="grid">
    <div id="image">
      <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png"/>
    </div>
</div>

<div class="box"></div>

Answer 1

将max-width:100%应用到img，这样它就可以取列宽的宽度

.grid {
  height: 1000px;
  width: 100%;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
}

#image {
  grid-column: 1;
  grid-row: 4;
}

.box {
  background: black;
  height: 500px;
}

#image img {
  max-width: 100%;
}

<div class="grid">
  <div id="image">
    <img src="https://futhead.cursecdn.com/static/img/14/players/176619.png" />
  </div>
</div>

<div class="box"></div>