html - 如何使用 CSS Flexbox 将流体图像和标题居中？

Question

请考虑一种布局，其中尺寸可变的图像和标题应位于屏幕中央。

布局应该像这样(引用上图):

1. 如果图像和说明足够小以适合屏幕，则不会发生任何特殊情况，它们只会居中。

2. 如果图像和说明不适合屏幕高度，图像会缩小直到适合。

3. 如果图像不适合屏幕宽度，它会缩小直到适合。

如何使用 CSS Flexbox 实现这种机制？

更新。如果标题不适合屏幕，图像应该缩小直到适合。

Answer 1

这是一种方法:

FIDDLE #1 (小图)

FIDDLE #2 (大宽高比)

FIDDLE #3 (大高宽比)

html,
body {
  margin: 0;
}
.wpr {
  display: flex;
  align-items: center;
  /* align vertical */
  justify-content: center;
  /* align horizontal */
  height: 100vh;
}
figure {
  text-align: center;
}
figcaption {
  width: 350px;
  text-align: left;
  margin: 0 auto;
}
img {
  max-width: 80vw; /* shrink img to viewport */
  max-height: 80vh; /* shrink img to viewport */
}

<div class="wpr">
  <figure>
    <img src="http://placehold.it/150x80" alt="">
    <figcaption>Caption for the awesome picture Caption for the awesome picture Caption for the awesome picture</figcaption>
  </figure>
</div>