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

Question

我有一种情况，需要在图像下方显示标题(不重叠)。图片的大小和说明的长度都未知。

整个图形元素的高度需要像这样100%:

元素的宽度应该是动态的，由图像比例决定，标题应该相应地换行。这很重要，因为我需要并排显示多张图片。

有什么办法可以只用 CSS 实现吗？

我试过使用 CSS 表格，但这不适用于 100% 高度。你可以在这里看到我的努力:

display: table

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

还有 flexbox，它有自己的问题。

display: flex

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

Answer 1

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

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>