各子供がお互いの高さが同じであるフレックスレイアウト

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

フレックス値を使用してimgを伸ばすことを避けることができます：flex:1 0 100%。 https://jsfiddle.net/86qmxk08/5/

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>

あなたはクロップ画像ウィッヒにはJavaScriptが必要になる場合がありますとき比isdifferentあまりにも背が高いです。