显示弹性变化图像高度

Question

<div id='wrap'>
<img id='eleph01' src='img/eleph01.gif' alt='elephant'>&nbsp;
<img id='eleph02' src='img/eleph01.gif' alt='elephant'>&nbsp;
<img id='eleph03' src='img/eleph01.gif' alt='elephant'>
</div>

CSS

#wrap{
    display:flex;
    justify-content:space-between;  
}
#eleph01{
    width:200px;
}
#eleph02{
    width:150px;
}
#eleph03{
    width:100px;
}

为什么图像会扭曲到相同的高度？我需要保持它们的纵横比，并且只是水平分配它们。

Fiddle

Answer 1

从您的css中删除display:flex。您可以参考此link Flex容器展开项目以填充可用空间，或缩小它们以防止溢出。您可以检查{{3} }