CSS图像和标题 - 高度100％在一起

Question

我的情况是需要在下方显示图片（不重叠）。图像的大小和标题的长度都不知道。

整个数字元素的高度需要100％像这样：

元素的宽度应该是动态的，由图像比率决定，标题应相应地换行。这很重要，因为我需要彼此相邻地显示几个图像。

有什么方法可以用CSS实现这个目标吗？

我尝试使用CSS-tables，但这不适用于100％的高度。你可以在这看到我的努力：

display: table

http://codepen.io/pju/pen/ZOmdEb

使用flexbox，它有自己的问题。

display: flex

http://codepen.io/pju/pen/QEJXNZ

Answer 1

我知道将<video>元素用于呈现视频以外的目的非常缺乏语义，但奇怪的是元素的属性poster使其能够比<img>更好地处理图像。您不清楚实际包装器的尺寸与它与环境的关系（即主体，视口或其他包装器？）。

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box;
  background: #000;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.box {
  display: table;
}
.frame {
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;
  height: auto;
  overflow: hidden;
  display: table-row;
}
.image {
  height: auto;
  width: 100%;
}
.title {
  font-size: 1.3em;
  font-family: 'Raleway';
  font-variant: small-caps;
  line-height: 1.15;
  text-align: center;
  background: rgba(221, 126, 110, .2);
  color: #EFEFEF;
}

<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<section class='box'>
  <figure class='frame'>
    <video class='image' poster='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'></video>
    <figcaption class='title'>Lena Söderberg 1972</figcaption>
  </figure>
</section>