我使用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>