Растянуть img на всю высоту grid

156

13 марта 2022, 22:00

Откуда эти зазоры? Делал разными способами но они не исчезают

.portfolio_pics { 
  display: grid; 
  grid-column-gap: 29px; 
  grid-row-gap: 35px; 
 
} 
 
.portfolio_pics div img { 
  width: 100%; 
  height: 100%; 
} 
 
.portfolio_pics div:nth-child(1) { 
  grid-column: 1/3; 
} 
 
.portfolio_pics div:nth-child(2) { 
  grid-column: 3/4; 
  grid-row: 1/3; 
} 
 
.portfolio_pics div:nth-child(6) { 
  grid-column: 2/4; 
  grid-row: 3/4; 
}

<div class="portfolio_pics"> 
          <div class="image"><img src="Assets/images/p1.jpg" class="image_content"></div> 
          <div class="image"><img src="Assets/images/p2.jpg" class="image_content"></div> 
          <div class="image"><img src="Assets/images/p3.jpg" class="image_content"></div> 
          <div class="image"><img src="Assets/images/p4.jpg" class="image_content"></div> 
          <div class="image"><img src="Assets/images/p5.jpg" class="image_content"></div> 
          <div class="image"><img src="Assets/images/p6.jpg" class="image_content"></div> 
</div>

Answer 1

За зазоры между элементами grid отвечают свойства:

grid-column-gap
grid-row-gap
или сокращенно grid-gap

Уберите их из ваших стилей и зазоров между элементами не будет.

Если вы про другое, то примените это к изображениям:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Answer 2

.portfolio_pics div img { display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

Так заработало

Answer 3

Это из-за того, что тег <img> - display: inline по дефолту.
Чтобы избавиться от этого бага, используйте display: block;

.pre { 
  display: inline-block; 
  float: left; 
  width: 150px; 
} 
 
.pre:nth-child(1) { 
  margin-right: 10px; 
} 
 
.pre p { 
  max-width: 150px; 
  font-size: 13px; 
} 
 
.pre .img { 
  background: red; 
} 
 
.pre.no-inline img { 
  display: block; 
}

<div class="pre"> 
  <div class="img"> 
    <img src="https://via.placeholder.com/150?text=Inline"> 
  </div> 
  <p>Эта картинка строчная, под ней есть красная полоска - это отступ от картинки.</p> 
</div> 
 
<div class="pre no-inline"> 
  <div class="img"> 
    <img src="https://via.placeholder.com/150?text=Block"> 
  </div> 
  <p>Эта картинка блочная, под ней уже не будет полоски</p> 
</div>