如何按比例缩放此Flexbox瓷砖网格

Question

I'm preparing the hero element for my website using some tiles with flexbox. The hero element has some variants, to the configuration is flexible: nesting the tiles I can obtain the variant I need. This is one variant and I cannot understand why when I resize the browser the image on the right, the vertical tile, lose the proportion. How can I scale the entire grid proportionally? And btw why I can remove the blue gap between the elements? It's something related to the height of the righe tile.

Here is the HTML

<div class="cover">
  <div class="tile is-ancestor">
    <div class="tile is-vertical is-2">
      <div class="tile is-child">
        <img src="https://s1.postimg.org/ga0s55bxr/cover1.jpg" />
      </div>
      <div class="tile is-child">
        <img src="https://s8.postimg.org/xnsnrs4x1/cover2.jpg" />
      </div>
    </div>
    <div class="tile">
      <img src="https://s1.postimg.org/n35qf5s4v/cover3.jpg" />
    </div>
  </div>
</div>

And here the compiled css

.cover {
  max-width: 1080px;
  background-color: blue;
  margin: 0;
}
@media screen and (min-width: 1351px) {
  .cover {
    max-width: 1350px;
    margin: 0 -135px;
  }
}
.cover .tile {
  align-items: stretch;
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: min-content;
}
.cover .tile.is-child {
  margin: 0 !important;
}
.cover .tile.is-vertical {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .cover .tile:not(.is-child) {
    display: flex;
  }
  .cover .tile.is-1 {
    flex: none;
    width: 33.33333%;
  }
  .cover .tile.is-2 {
    flex: none;
    width: 66.66667%;
  }
  .cover .tile.is-3 {
    flex: none;
    width: 100%;
  }
}

I create also a codepen

Answer 1

THis is how i would make it all happen..

You simply have to define the widths of the IMG and make sure to change the flex direction.

Everything can be flexboxed..

In your case it is the img so you need to flex one above from the img

    .container {
    display:flex;

    }

    .container_left {display: flex;
                        flex: 1;
                        flex-direction:column}

    .left {
        flex:2;
        display: flex;
        align-items: stretch;
            }

.left img {max-width: 100%}
.right img {max-width: 100%}

    .right {
        flex:1;
    }

@media (max-width:768px) {
    .container{
        flex-direction: column


    }
}

The html i used.. You can apply it to your code..

    <div class="container">

    <div class="container_left">
            <div class="left"><img src="https://s1.postimg.org/ga0s55bxr/cover1.jpg" /></div>
            <div class="left"> <img src="https://s8.postimg.org/xnsnrs4x1/cover2.jpg" /></div>
        </div>

        <div class="right"> <img src="https://s1.postimg.org/n35qf5s4v/cover3.jpg" /></div>



    </div>

Here it is on codepen for you

https://codepen.io/maffas/pen/zzxMxO