CSS image and caption – height 100% together

Question

I have a situation where an image needs to be displayed with a caption underneath (not overlapping). Neither the size of the image nor the length of the caption are known.

The height of the whole figure element needs to be 100% like this:

The width of the element should be dynamic, determined by the image ratio, the caption should line break accordingly. This is important because I need to display several images next to each other.

Is there any way I can achieve this with just CSS?

I tried with CSS-tables, but that doesn't work with 100% height. You can see my effort here:

display: table

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

And with flexbox, which has its own problems.

display: flex

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

Answer 1

I know that using a <video> element for purposes other than presenting video is very unsemantic, but it's strange that the element's attribute poster enables it to handle an image better than an <img>. You weren't clear as to the dimensions of the actual wrapper with it's relation to it's environment (i.e. body, viewport, or another wrapper perhaps?).

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>