flexbox下图片排列变形问题？

这是我理想中flexbox的排列方式。。

这是残酷的现实排列方式：

我想让图片的高度配合宽度等比缩放，应该怎么写才能等比缩放？(在不嵌套新的标签的前提下，只修改css)

想用flexbox实现

源码：

<body>
  <div>
    <img src="http://www.bizhitupian.com/uploadfile/2013/0220/20130220113037928.jpg" alt="">
    <img src="http://www.bizhitupian.com/uploadfile/2013/0220/20130220113037928.jpg" alt="">
    <img src="http://www.bizhitupian.com/uploadfile/2013/0220/20130220113037928.jpg" alt="">
    <img src="http://www.bizhitupian.com/uploadfile/2013/0220/20130220113037928.jpg" alt="">
    <img src="http://www.bizhitupian.com/uploadfile/2013/0220/20130220113037928.jpg" alt="">
  </div>
</body>

//css 
div {
  display: flex;
  flex-direction: row;
}
img {
  display: inline-flex;
  width: 100px;
  height: auto;
  flex-grow: 1;
}

谢谢~

https://jsfiddle.net/djcsmtok/1/我在img外加多一个div实现了你想要的效果，不添加新标签没做出来，你看看我的链接。

最外层设置一个高度

更改img元素选择器中的height的值，不要设置为auto，设置为100%即可

【热门文章】