표시 아마 이미지 높이 변화

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

이 link 플렉스 컨테이너를 참조 할 수 css.You에서 display:flex 제거가 가능한 공간을 채우기 위해 항목을 확장하거나 overflow.You이 fiddle