Question

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

HTML

handleRequest

CSS

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

我创建了这个codepen以更好地理解问题 - 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>

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

1 个答案: