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

Question

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

布局应如下所示（参考上图）：

如果图像和说明足够小以适合屏幕，则不会发生任何特殊情况，它们只会居中。
如果图片和说明不适合屏幕高度，图片会缩小直到适合。
如果图像不适合屏幕宽度，它会缩小直到适合。

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

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

How to centre fluid image and a caption using CSS Flexbox?

html

css

image

flexbox

FIDDLE #1(小图)

FIDDLE #2（大宽高比）

FIDDLE #3（大高宽比）