CSS image and signature - 100% height together

Question

I have a situation where the image should be displayed under the heading below (not overlapping). Neither the size of the image nor the length of the inscription is known.

The height of the entire shape element should be 100% as follows:

The width of the element should be dynamic, determined by the ratio of the image, while the title should correspond to a line break. This is important because I need to display multiple images next to each other.

Is there a way that I can only achieve this with CSS?

I tried with CSS tables, but this does not work at 100% height. You can see my efforts here:

display: table

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

And with flexbox, which has its problems.

display: flex

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

Answer 1

, <video> , , , , element 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>

Hide result