html - Flexbox 在 Div 中收缩图像以用于列堆叠图像

Question

我想要一张图片在左边，两张在右边，一个叠在一起。随着占地面积的缩小，水平方向上，我希望图像也变小，同时保持它们的纵横比。当我目前这样做时，图像保持相同的大小并被推离页面的左侧。

我现在正在使用 bootstrap 3.*。但我很想知道如何使用 flexbox 来做到这一点。

codepen

* {
  box-sizing: border-box;
}

.content {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.row {
  display: flex;
  flex-flow: column wrap-reverse;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  height: 40px;
  background-color: rgba(0, 0, 0, .2);
}

.cell {
  text-align: center;
  display: flex;
  align-items: center;
  min-height: 50%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.ordered3 {
  order: 3;
  flex: 2;
  padding-right: 10px;
  border-right: rgba(0, 0, 0, 0.3) solid 3px;
}

.ordered2 {
  order: 2;
  flex: 1;
}

.ordered1 {
  order: 1;
  flex: 1;
}

img {
  margin: auto;
  width: 100%;
  max-width: 300px;
  max-height: 100%
}

<div class="content">
  <div class="row">
    <div class="cell ordered3">
      <img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg" />
    </div>
    <div class="cell ordered2">
      <img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg" />
    </div>
    <div class="cell ordered1">
      <img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg" />
    </div>
  </div>
</div>

Answer 1

查看我的 codeopen .如果这不是您想要的，请澄清您的问题。

    * {
      box-sizing: border-box;
    }

    .content {
      background-color: #f9f9f9;
      border: 1px solid #ececec;
      padding: 10px;
    }

    .row {
      display: flex;
      align-items: center;
    }

    .cell {
      padding-top: 5px;
      padding-bottom: 5px;
    }

   

    img {
      width: 100%;
      display: block;
      max-width: 300px;
    }

<div class="content">
  <div class="row">
      <div class="cell">
          <img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
      </div>
      <div class="cell">
          <img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
        <img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
      </div>
    <div class="cell">
          <img src="http://lorempixel.com/output/nature-q-c-260-44-8.jpg"/>
      </div>
     <div class="cell">
          <img src="http://lorempixel.com/output/city-q-c-260-24-3.jpg"/>
        <img src="http://lorempixel.com/output/abstract-q-c-310-37-1.jpg"/>
      </div>
    </div>
</div>