Flexbox缩小Div中的图像以用于列堆积图像

Question

我想在左边有一个图像，在右边有两个图像叠在一起。随着足迹水平缩小，我希望图像也变小，保持其纵横比。当我目前这样做时，图像保持相同的大小，并被推离页面的左侧。

我正在使用bootstrap 3. *。但我很想知道如何使用flexbox。

codepen

＆＃13;

＆＃13;

* {
  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%
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;