如何使用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>

Answer 2

你是说这样的意思吗？ - 这只是一个简单的例子，但可能是你想要达到的目标。

.container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

<div class="container">
  <img class="myImg" src="http://placekitten.com/g/200/300" alt="" />

  <div class="caption">I'm a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long caption</div>
</div>

Answer 3

我认为我的工作正常，它需要您指定图像是纵向还是横向。

你可以看到她的生活：http://bekreatief.github.io/demo/flexbox_img_with_captions/

<div class="screen">
  <div class="img landscape"><img src="http://fc07.deviantart.net/fs71/f/2014/174/1/7/17a514b56717abed29512fddb462de82-d7nmo0f.png" alt="img_wide" /><span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas quibusdam voluptas vel facilis sunt quod consectetur assumenda praesentium perferendis nesciunt.</span></div>
</div>
<div class="screen">
  <div class="img portrait"><img src="http://th01.deviantart.net/fs70/PRE/i/2012/016/0/d/ruffles_version_ii_by_mynimi94-d4mj9fv.png" alt="img_high" /><span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea amet minus architecto quidem ab quisquam id, corrupti suscipit placeat natus neque cum ex enim eveniet quasi facere, eum asperiores distinctio.</span></div>
</div>

点击此处查看完整代码：https://github.com/bekreatief/bekreatief.github.io/tree/master/demo/flexbox_img_with_captions

// Sass
.screen{
  width: 100%;
  position: absolute;
  left: 0;
  height: 100vh;
  box-sizing: border-box;
  @include flexbox(row, wrap, center, center);

  &:nth-of-type(1){
    top: 0;
  }

  &:nth-of-type(2){
    top: 100vh;
  }

  &:nth-of-type(3){
    top: 200vh;
  }

  .img{
    max-width: 100%;
    height: 100vh;
    @include flexbox(column, nowrap, center, center);

    span{
      text-align: left;
    }
  }
  .landscape{
    img{
      max-height: 100vh;
      max-width: 100%;
    }
  }
  .portrait{
    img{
      height: 100vh;
    }
  }
}

Answer 4

抱歉，我真的不得不更加注意保留这个问题。

似乎没有Javascript就无法解决问题。我从@Danield提出的想法开始，应用了一些Javascript并提出了以下解决方案。

$figure = $('figure');
$figcaption = $('figcaption');
$img = $('img');

$(window).resize(function() {
  var height = $figure.height() - $figcaption.height();
  $img.css('max-height', Math.max(height, 0));
}).resize();

@import url("//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css");
figure {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  margin: 0;
}
img {
  display: block;
  max-width: 100vw;
}
figcaption {
  flex: none;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure>
  <img src="http://lorempixel.com/640/480/fashion" />
  <figcaption>Whatever the foobar,<br>she said</figcaption>
</figure>