Html 在flex网格中按比例调整图像大小

我正在尝试创建3列布局，中间列的宽度由百分比定义，左右列包含图像，当我更改中间列的宽度时，需要按比例缩放图像

HTML

<div class="wrapper">
  <img src="http://www.tinaandersonoc.com/wp-content/uploads/2013/01/brick_wallS.jpg" alt="" />

  <div class="dynamic"></div>

  <img src="http://www.tinaandersonoc.com/wp-content/uploads/2013/01/brick_wallS.jpg" alt="" />
</div>

我创建这个代码笔是为了更好地理解问题-

---

我需要在CSS中添加什么才能按比例缩放这两个图像（应该是方形图像，而不是这个“面条”）。

如果要保持比例，图像不应该是flex child，请将它们包装在任何标记中

div.wrapper{
利润率：20px0；
显示：框；
显示：-webkit flex；
显示器：flex；
宽度：80%；
保证金：自动；
}
div.wrapper b{/*b或span或div或其他（b是写的缩写）*/
弹性：1；
}
分区包装器b img{
宽度：100%；
显示：块；
}
动态分区{
背景色：红色；
宽度：80%；
}

图像不应该是flex子级，将它们包装在任何标记中

div.wrapper {
  margin: 20px 0;
  display: box;
  display: -webkit-flex;
  display: flex;
  width: 600px;
}

div.wrapper img {
  max-width: 100%;
  width: auto;
  height: auto;
  box-flex: 1;
}

div.dynamic {
  background-color: red;
  height: 20px;
  width: 80%;
}