각 자식이 서로 같은 높이의 플렉스 레이아웃 - 이미지 찌그러 뜨린 이미지

Question

JS Fiddle 플렉스 레이아웃을 사용하고 있습니다. 나는 목록을 가지고 :

HTML :

<ul> 
    <li><img src="....."></li> 
    .... 
</ul> 

CSS :

ul{ 
    list-style-type: none; 
    margin: 0; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
} 

li{ 
    width: 25%; 
    display: flex; 

} 

img{ 
    height: auto; 
    max-width: 100%; 
} 

문제이며, 이미지가 전체 높이로 끌려 가고있다 - 내가 어떻게 이미지의 가로 세로 비율을 유지할 수 있습니다? 또한 모든 목록 요소가 동일한 높이가 되길 원합니다 (이렇게하려면 display: flex을 사용했습니다).

Answer 1

flex 값을 사용하여 img를 늘리지 않아도됩니다 (flex:1 0 100%).

ul{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
} 
 
li{ 
 
    width: 25%; 
 
    display: flex; 
 
} 
 

 
img{ 
 
    flex:1 0 100%; 
 
}

<ul> 
 
    <li><img src="https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/5/5/23/enhanced-buzz-11819-1367809268-11.jpg"></li> 
 
    <li><img src="http://www.samerweddings.com/en/img/birthday/album/orginal/0.64044500%201391324553_cat-thumb%5B1%5D.jpg"></li> 
 
    <li><img src="https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/5/5/23/enhanced-buzz-11819-1367809268-11.jpg"></li> 
 
    <li><img src="https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/5/5/23/enhanced-buzz-11819-1367809268-11.jpg"></li> 
 
    <li><img src="https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/5/5/23/enhanced-buzz-11819-1367809268-11.jpg"></li> 
 
    <li><img src="https://img.buzzfeed.com/buzzfeed-static/static/enhanced/webdr03/2013/5/5/23/enhanced-buzz-11819-1367809268-11.jpg"></li> 
 
</ul>

당신은 작물 이미지 느릅 나무에 자바 스크립트가 필요할 수 있습니다 https://jsfiddle.net/86qmxk08/5/ 때 비율 isdifferent 너무 높이입니다.