css - flexbox下图片排列变形问题？
本文介绍了css - 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;
}谢谢~
解决方案
更改img元素选择器中的height的值，不要设置为auto，设置为100%即可
这篇关于css - flexbox下图片排列变形问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
