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

Question

我有这样一种情况，一个图像需要在下面显示一个标题(而不是重叠)。图像的大小和字幕的长度都是未知的。

整个figure元素的高度需要为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>

​