css - 用图像填充容器剩余的垂直空间，同时继承图像的宽度

Question

我有一个相当具体的非环绕 div 设置，这些 div 彼此水平对齐并且(应该)在屏幕外流动。想象一长排 div 流出屏幕。

(后面打算用JavaScript实现一些滚动功能，把屏幕外的部分滚动回屏幕)。

在每个 div 中，我在顶部都有一些文本，在底部有一个图像。上面的文字我不知道确切的高度。然而，底部的图像应该填充每个 div 中剩余的垂直空间。同时保持原图宽高比不变，图片的宽度决定包含的div的宽度。

澄清一下:图像不应不被裁剪，也不应不以任何方式被挤压或拉伸(stretch)。它们应该以填充 div 中剩余垂直空间的方式缩放/显示。

好吧，我没有让它工作。

这是我目前拥有的:

<div id="wrapper">
  <div id="slider">

    <div class="slide">
      <p>Some text</p>
      <img src="http://placekitten.com/200/300">
    </div>

    <div class="slide">
      <p>Some text</p>
      <img src="http://placekitten.com/600/500">
    </div>

    <div class="slide">
      <p>Some text</p>
      <img src="http://placekitten.com/600/200">
    </div>

  </div>
</div>

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  height: 100%;
  white-space: nowrap;
  position: absolute;
  font-size: 0;
  background-color: lightgreen;
}

.slide {
  height: 100%;
  display: inline-block;
  margin-right: 15px;
  background-color: pink;
}

p {
  font-size: 16px;
  padding-bottom: 10px;
}

img {
  height: 100%;
}

这显然是行不通的，因为在图像上使用 100% 高度会使它的容器变大，滚动条出现在每个 div 不应出现的地方。我尝试在图像上使用带有 flex-grow: 1; 的 flexbox，但这会扭曲它，尤其是当我在上面的文本中添加一些填充时。

这是一个jsfiddle演示问题。

我该如何解决这个问题？

(如果这是相关的:我们可以假设图像上方的文本永远不会比图像宽(因为它只会是数字))。

Answer 1

编辑

要获得不同字体大小的完美宽高比，您可以使用 em 而不是 px。在这个 jsfiddle https://jsfiddle.net/ormhukax/ ，我将行高设置为 1.2，并在 CSS 计算中使用了 1.2em。

最终 CSS:

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 300px;
  position: relative;
}

#slider {
  height: 100%;
  font-size: 0;
  background-color: lightgreen;
  flex-wrap: nowrap;
  display: flex;
}

.slide {
  font-size: 48px;
  line-height: 1.2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 15px;
  background-color: pink;
  overflow: initial;
}

p {
  padding-bottom: 10px;
}

img {
  flex: 1;
  height: calc(100% - 1.2em - 10px);
}

---

看看这个 fiddle : https://jsfiddle.net/4nw03vrd/2/

这是我使用的 CSS:

* {
  margin: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#wrapper {
  height: 328px;
  position: relative;
}

#slider {
  height: 100%;
  font-size: 0;
  background-color: lightgreen;
  flex-wrap: nowrap;
  display: flex;
}

.slide {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 15px;
  background-color: pink;
  overflow: initial;
}

p {
  font-size: 16px;
  padding-bottom: 10px;
}

img {
  flex: 1;
  height: calc(100% - 28px);
}

需要 calc() 来补偿纵横比的轻微失真，如果图像比文本高度足够大，则可以忽略不计，基本上是字体大小 + 底部填充