How to scale proportionally this flexbox tiles grid

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

To remove the blue gap, add `vertical-align: bottom` to the `img` elements. https://stackoverflow.com/a/31445364/3597276 — Michael Benjamin, Jun 04 '17 at 21:56
@Gerard I already try but the images lose their aspect ratio... — Roberto Pezzali, Jun 04 '17 at 21:59
@Michael_B ok but when I resize the browser everything is broken — Roberto Pezzali, Jun 04 '17 at 21:59
Your layout has multiple issues. I just helped you solve one, which involved the `vertical-align` property. I'm at work and can't help you with others right now. — Michael Benjamin, Jun 04 '17 at 22:01

johnashu · Answer 1 · 2017-06-05T23:42:11.980

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

How to scale proportionally this flexbox tiles grid

1 Answers1