Flex：图片在上，文字在下。用宽高比图像扩展剩余高度。

Question

我正在尝试创建一个简单的设计，图片在上面，文字在下面。我正在使用弹性盒子。

我想保持图像的比例相同，所以我使用填充顶部纵横比 hack 来做到这一点，效果很好。

我正在努力解决的问题是让图像下方的文本框占据容器中剩余 space 的其余部分。我希望 flexbox 能让这变得简单，但我认为将它与纵横比 hack 结合使用会导致问题。

这是基本布局 https://codepen.io/anon/pen/NEqdyN 的 fiddle。任何人都可以帮我让每个红色框扩展以填充剩余的高度吗？我还需要在每个角的底部添加一个边框半径，所以我不能使用溢出隐藏方法。

提前致谢！

下面的代码

<div class="container">
  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}

.container {
  display: flex;
}

.card {
  width: 30%;
  margin: 0 1%
}

.image-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.text {
  background: red;
  padding: 20px
}

Answer 1

它应该通过在每张卡片上定义一个 flex container 并在 文本块.

上使用 flex: 1 0 auto 来工作

.card {
  display: flex;
  flex-direction: column;
}

.text {
  flex: 1 0 auto;
}

演示

body {
  margin: 0;
}

.container {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 0 1%;
}

.image-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.text {
  background: red;
  padding: 20px;
  flex: 1 0 auto;
}

<div class="container">
  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Flex：图片在上，文字在下。用宽高比图像扩展剩余高度。

Flex: Image top, text bottom. Expand remaining height with aspect ratio image.

html

css

aspect-ratio

flexbox