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

我正在使用一些带有flexbox的磁贴为网站准备hero元素。 hero元素具有一些变体，配置灵活：将瓦片嵌套可以获取所需的变体。这是一种变体，我无法理解为什么调整浏览器大小时，右侧的图像（垂直图块）会丢失该比例。如何按比例缩放整个网格？
顺便说一句，为什么我可以消除元素之间的蓝色间隙？这与刚性瓷砖的高度有关。

这是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>

这是编译的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%;
  }
}

我还创建了一个codepen

最佳答案

这就是我如何做到这一切的方法。

您只需要定义IMG的宽度并确保更改弯曲方向即可。

一切都可以装箱。

在您的情况下，它是img，因此您需要从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


    }
}

我使用的html。您可以将其应用于代码。

    <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>

这是在codepen上为您服务

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

关于html - 如何按比例缩放此Flexbox瓷砖网格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44359026/