显示亚麻改变图像高度

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.You可以参考这个link Flex容器的display:flex扩展项目，以填补可用空间，或缩小它们，以防止overflow.You可以检查fiddle