html - Flex 布局，其中每个子项的高度彼此相同 - 图像压缩问题

Question

JS Fiddle我正在使用 flex 布局。我有一个列表:

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 拉伸(stretch)为: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 来裁剪太高的图像。