CSS图片和标题 - 高度同时为100%

Question

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

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

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

有没有办法只用CSS实现这个效果？

我尝试过使用CSS表格，但这不能与100%高度配合使用。您可以在此处查看我的努力：

display: table

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

使用flexbox布局时，会有它自己的问题。

display: flex

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

- pjupju

---

用旧的/普通的CSS来实现这个不太可能。较新版本的CSS允许进行大小计算，但是支持并不普遍。你可能需要使用JavaScript来计算大小并相应地设置样式。 - Marc B

它们的总和需要达到什么比例？更重要的是，当它们的总和大于/小于期望的“100％”时，你想要发生什么？缩小/裁剪图像还是只是在图像和标题之间添加一些空间？期望的结果并不完全清楚。 - tao

@AndreiGheorghiu 容器元素的高度应为100％... 并且图像在保持比例的同时应缩小。标题和图像之间的间距应保持不变。 - pjupju

所以你想让每个图像+标题组调整其宽度，使它们的高度总和加上一定的固定间隙相同（可能由最高的组设置，并且可能不大于视口高度）。如果这是正确的，那么仅使用CSS是不可能实现的，据我所知，你需要进行DOM操作（JavaScript、TypeScript、jQuery）。 - tao

Answer 1

我知道除了呈现视频之外，使用<video>元素可能会导致语义不清，但奇怪的是该元素的属性poster使其比<img>更好地处理图像。您并没有明确说明实际包装器的尺寸与其环境（即body、视口或另一个包装器）的关系。

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>

- zer00ne