Не растягивается полностью background-image

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); 
body { 
  padding: 0; 
  margin: 0; 
  background-color: white; 
  color: white; 
  min-height: 100vh; 
  display: flex; 
  justify-content: space-between; 
} 
 
div { 
  width: 24vw; 
  height: 100vh; 
  background-color: magenta; 
  background-image: url(http://lorempixel.com/100/100); 
  background-repeat: no-repeat; 
  background-position: center; 
  font-size: 160%; 
  font-weight: 600; 
  text-shadow: 0 0 4px black; 
  font-family: roboto condensed; 
  display: flex; 
  align-items: center; 
  text-align: center; 
} 
 
div:nth-child(1) { 
  background-size: none 
} 
 
div:nth-child(2) { 
  background-size: 100% 100% 
} 
 
div:nth-child(3) { 
  background-size: cover 
} 
 
div:nth-child(4) { 
  background-size: contain 
}

<div>background-size: none</div> 
<div>background-size: 100%</div> 
<div>background-size: cover</div> 
<div>background-size: contain</div>

.postgrid { 
  margin: calc(12.5vh - 1.25em) 0; 
  display: grid; 
  grid-template-columns: repeat(8, 1fr); 
  grid-template-rows: repeat(3, 25vh); 
  grid-gap: 1.25em; 
} 
 
.postgrid>div { 
  background-repeat: no-repeat; 
  background-size: cover; 
  box-shadow: 0 0 4px black; 
} 
 
.post1 { 
  grid-column: 1 / 5; 
  grid-row: 1 / 3; 
} 
 
.post2 { 
  grid-column: 1 / 3; 
  grid-row: 3 / 3; 
  background-image: url("http://lorempixel.com/100/100"); 
  background-position: center; 
  background-color: red; 
} 
 
.post3 { 
  grid-column: 3 / 5; 
  grid-row: 3 / 3; 
  background-image: url("http://lorempixel.com/100/100"); 
  background-position: center; 
  background-color: red; 
} 
 
.post4 { 
  grid-column: 5 / 9; 
  grid-row: 1 / 3; 
  background-image: url("http://lorempixel.com/100/100"); 
  background-position: center; 
  background-color: red; 
} 
 
.post5 { 
  grid-column: 5 / 8; 
  grid-row: 3 / 3; 
}

<div class="postgrid"> 
  <div class="post1"></div> 
  <div class="post2"></div> 
  <div class="post3"></div> 
  <div class="post4"></div> 
  <div class="post5"></div> 
  <div class="post6"></div> 
</div>