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

Question

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

这是基于这种布局：

Layout example from not-studio.com

该示例的主要内容是，所有图像都是根据确切的规格创建的，以使网格的大小交替变换。

我希望能够：
•使用任何图像尺寸，并将其裁剪到包含盒子并且溢出隐藏的
•缩小浏览器时，按比例放置包含框和图像比例的宽度/高度 •如果可能，不要依赖任何插件。

到目前为止我尝试的是：

•Flexbox
•浮子
•最大/最小高度，负上边距为
•使用填充和绝对定位，如example

有关如何以最清洁的方式实现这一目标的任何想法？

Answer 1

这是一个开始。现在，您可以使用图像填充每个项目，添加文本等。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;