Question

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

我希望flex容器像现在一样缩小，以匹配最大图像的高度，但我希望其他图像与flex容器的高度相匹配。每当我尝试时，它们就会变成全高（原始高度）。有没有办法实现这个目标？

如果我没有足够好地解释它 - 我希望图像占据其父母身高的100％，如附图中的蓝色框所示。

Answer 1

我们不知道你做了什么，可能过度使用了flexbox规则？

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

或如果在

上设置了flex

＆＃13;

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

＆＃13;

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

＆＃13;

Flexbox布局中的相等高度图像

1 个答案: