Image in grid exceeds the original space of

Question

I divided my .grid element in 4 column and 4 row using CSS grids. I adjusted the image so that it would be in the 1st column and the 4th row. But, as you can see, the image of a man exceeds the original height of .grid <div> and it overlaps and goes over another element below it.

How do I keep the image in the original size of .grid and align it to the 1st column and 4th row? (I also want it to stick to the top of that black element, but not overlap it).

.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>

score 0 · Accepted Answer · answered May 27 '18 at 13:47

0

Apply max-width:100% to the img so that it can take the width of column width

.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>

answered May 27 '18 at 13:47

Bhuwan

16,525
5
34
57

1

Thanks for your answer, but when I click to see the full page of your snippet, the problem seems to be there again. EDIT: I also added `max-height: 100%;` and the problem is gone. Sorry for extra comment and thanks again. – Alexander May 27 '18 at 14:01

Rainbow · Answer 2 · 2018-05-27T17:06:36.310

You need to constraint the <img> to stay within it's parent height and width.

* {
  margin: 0;
  padding: 0;
}

.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;
}


/* Added */

#image>img {
    width: 100%;
    height: 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>

score 0 · Answer 3 · answered May 27 '18 at 17:37

Since the height of the container is 1000px, and each row is set to 25%, then the height of each row is 250px.

With that information you can set the height of the image, while maintaining the aspect ratio and filling the entire box with the object-fit property.

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

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

#image > img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.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>

Image in grid exceeds the original space of

3 Answers3