Flexbox网格库内部有更大的图像

Question

我必须将包含图像的布局作为背景（图像将在相同的结构中重复）。 是否有可能使用flexbox和这样的html结构来实现这一点（以响应方式？

.portfolio {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
 }
 
 .portfolio-item {
    position: relative;
    width: 45%;
    padding: 20px;
    margin-bottom: 20px;
    height: 320px;
    background-color: red;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
 }
 
.portfolio-item:nth-child(2n-1) {
    margin-right: 2%;
}

.portfolio-item:first-child {
   height: 670px;
}

.portfolio-item:nth-child(n+6) {
    height: 670px;
}

<div class="portfolio">
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
  <div class="portfolio-item"></div>
</div>