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

【问题标题】：CSS image and caption – height 100% togetherCSS 图像和标题 - 高度 100% 一起
【发布时间】：2016-08-10 16:35:55
【问题描述】：

我有一种情况，图片需要在下方显示标题（不重叠）。图片的大小和标题的长度都是未知的。

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

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

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

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

display: table

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

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

display: flex

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

【问题讨论】：

使用旧的/普通的 css，不太可能。较新的 css 允许执行大小调整“数学”，但支持还不是完全通用的。您需要适当地使用 javascript 来计算尺寸并在那里相应地设置样式。
他们的总和需要是什么的 100%？而且，更重要的是，当它们的总和大于/小于所需的100% 时，您希望发生什么？缩小/裁剪图像，或者只是在图像和标题之间添加一些空间？期望的结果并不完全清楚。
@AndreiGheorghiu 容器元素的 100% 高度......并且图像应该在保持比例的同时缩小。标题和图片之间的间距应该保持不变。
因此您希望每个图像+标题组调整其宽度，以便它们的高度之和加上某个固定间隙是相同的（并且可能由最高组设置并且可能不大于视口高度)。如果这是正确的，那么单独使用 CSS 是不可能的，afaik。您需要 DOM 操作（JavaScript、TypeScript、jQuery）。

标签： html css

【解决方案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>

【讨论】：