css - 具有挑战性的布局——如何实现？

Question

我正在尝试创建附加布局，但遇到了困难。

它基于这种布局:

Layout example from not-studio.com

这个例子的主要内容是他们所有的图像都是按照精确的规范创建的，以使网格的大小交替变化。

我希望能够:
• 使用任何尺寸的图片，并将其裁剪到 overflow hidden 的包含框
• 使包含框和图像的宽度/高度在您缩小浏览器时按比例缩放。
• 如果可能，不要依赖任何插件。

到目前为止我尝试过的是:

• flex 盒子
• 花车
• 负上边距的最大/最小高度
• 使用填充和绝对定位，如此example

关于如何以最干净的方式实现这一点有什么想法吗？

Answer 1

这是您的开始。现在您可以用图像填充每个元素，添加文本等。

html, body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  min-height: 500px;
}

.container .item {
  height: calc(16.6% - 20px);
  background: #eee;
  margin: 10px;
  display: flex;
  flex-direction: column;
}

.container .item:nth-child(12),
.container .item:nth-child(10),
.container .item:nth-child(7),
.container .item:nth-child(5),
.container .item:nth-child(4),
.container .item:nth-child(2) {
  height: calc(33.3% - 20px);
}

.container .item .img {
  flex: 1;
}

.container .item .txt {
  flex: 0;
  background: #fff;
  color: #900;
}

<div class="container">
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
  <div class="item">
    <div class="img">
      An image
    </div>
    <div class="txt">
      Some text
    </div>
  </div>
</div>