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>. 您不清楚实际包装器的尺寸及其与其环境的关系（即主体、视口或其他包装器？）。

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n