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

谢谢~

css

阅读 13.2k

6 个回答

✓ 已被采纳

https://codepen.io/anon/pen/r...

关键在align-self属性

yeahs

302512

发布于
2016-04-26

更新于
2016-04-26

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

AIRPIG

1.4k1714

发布于
2016-04-26

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

guangpunba

最外层设置一个高度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
              display: flex-box;
              flex-direction: row;
            }
            img {
              display: inline-flex;
              width: 500px;
              margin: 5px;
              flex-grow: 1;
            }
        </style>
    </head>
    <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>
</html>

展示效果：

预览：https://ityanxi.github.io/seg...