Flexbox布局中的等高图像 [英] Equal Height images in Flexbox layout

问题描述

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

This is easier to show in an image- http://puu.sh/n8WGw/0b01b020c7.png

我希望flex容器像现在这样收缩，以匹配最大图像的高度，但是我希望其他图像与flex容器的高度匹配.每当我尝试时，它们就会变成全高(它们的原始高度).有没有办法做到这一点?

I want the flex container to shrink as it's doing now, to match the height of the largest image, but I want the other images to match the height of the flex container. Whenever I try, they just become full height (their original height). Is there a way to accomplish this?

如果我对它的解释不够好-我希望图像占据其父代高度的100％，如所附图像中的蓝色框所示.

If I've not explained it well enough - I want the images to take up 100% of their li parent height, as shown by the blue box in the image attached.

推荐答案

我们不知道您实际上做了什么，也许是过度使用了flexbox规则?

We do not know what you did really, maybe overused flexbox rules ?

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

or if flex set on li

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>

这篇关于Flexbox布局中的等高图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！