html - Flexbox 布局中的等高图像

Question

这更容易在图像中显示- http://puu.sh/n8WGw/0b01b020c7.png

我希望 flex 容器像现在一样收缩，以匹配最大图像的高度，但我希望其他图像与 flex 容器的高度匹配。每当我尝试时，它们都会变成全高(它们的原始高度)。有办法实现吗？

如果我解释得不够好 - 我希望图像占据其 li 父级高度的 100%，如所附图像中的蓝色框所示。

Answer 1

我们不知道你到底做了什么，也许过度使用了 flexbox 规则？

ul {
  display: flex;
}
li {
  list-style-type: none;
}
img {
  height: 100%;/* in flex-child, the tallest will set rythm ... here it's about 200px; + gap height underneath if no reset of display or vertical-align */
}

<ul>
  <li>
    <img src="http://lorempixel.com/g/400/100/" alt="" />
  </li>
  <li>
    <img src="http://lorempixel.com/g/400/200/" alt="" />
  </li>
  <li>
    <img src="http://lorempixel.com/g/300/150/" alt="" />
  </li>
  <li>
    <img src="http://lorempixel.com/g/400/100/" alt="" />
  </li>
</ul>

或者如果在 li 上设置了 flex

ul {
  display: flex;
  width: 100%;
  padding: 0;
}
li {
  flex: 1;
  overflow: hidden;
  /* img will be cut off */
}
img {
  min-height: 100%;/* again , tallest should set the rythm */
  min-width: 100%; /* unless one doesn't fit the width */
  display: block;
}

<ul>
  <li>
    <img src="http://lorempixel.com/g/400/100/" alt="" />
  </li>
  <li>
    <img src="http://lorempixel.com/g/400/200/" alt="" />
  </li>
  <li>
    <img src="http://lorempixel.com/g/300/150/" alt="" />
  </li>
  <li>
    <img src="http://lorempixel.com/g/200/50/" alt="" />
  </li>
</ul>