我使用CSS网格将.grid元素分为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>

最佳答案

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>

08-25 09:49
查看更多