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

Question

我正在尝试创建 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

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

我创建此代码笔是为了更好地理解问题 - http://codepen.io/anon/pen/yOJrxJ

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

Answer 1

如果你想保持比例，图像不应该是 flex-child ，将它们包裹在任何标签中

div.wrapper {
  margin: 20px 0;
  display: box;
  display: -webkit-flex;
  display: flex;
  width: 80%;
  margin:auto;
}
div.wrapper b {/* b or span or div or whatever (b is short to write ) */
  flex: 1;
}
div.wrapper b img {
  width: 100%;
  display: block;
}
div.dynamic {
  background-color: red;
  width: 80%;
}

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

  <div class="dynamic">image should not be flex-child , wrap them in any tag</div>

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