Question

我正在使用一些带有flexbox的图块为我的网站准备英雄元素。 hero元素有一些变体，配置很灵活：嵌套tile我可以获得我需要的变体。这是一个变种，我无法理解为什么当我调整浏览器右侧的图像，垂直图块，失去比例。如何按比例缩放整个网格？顺便说一句，为什么我可以消除元素之间的蓝色差距？这是与瓷砖高度相关的东西。

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

Answer 1

这就是我将如何实现这一切......

您只需定义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

如何按比例缩放此flexbox tile网格

1 个答案: