Flex layout where each child is the same height as each other - image squashed issue

Question

JS Fiddle I'm using a flex layout. I have a list:

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%;
}

The issue is, the images are being pulled to the full height - how can I maintain an image's aspect ratio? I also want all list elements to be the same height (to do this I have used display: flex).

Answer 1

you can avoid stretching img using flex value to : 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>

You might need javascript to crop image wich are too tall when ratio isdifferent.