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

【问题标题】：Flex layout where each child is the same height as each other - image squashed issueFlex 布局，其中每个孩子的高度彼此相同 - 图像压缩问题
【发布时间】：2016-07-21 03:52:21
【问题描述】：

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）。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以避免使用 flex 值将 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 来裁剪太高的图像。

【讨论】：