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

Question

请考虑一种布局，其中一个变量尺寸的图片和标题应该居中在屏幕上。

布局应该像这样（请参见上图）：

1. 如果图片和标题足够小以适合屏幕，则不会发生任何特殊情况，它们将居中。 2. 如果图片和标题无法适应屏幕高度，则缩小图片直到适应。 3. 如果图片无法适应屏幕宽度，则缩小图片直到适应。

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

更新。如果标题无法适应屏幕，则图片应缩小直到适应。

- Vadym Borodin

---

这是什么背景？代码在哪里？对于这样的要求，不需要使用Flexbox。 - ralph.m

@ralph.m 不需要代码。这应该没有使用JavaScript并且速度很快。仅限现代浏览器也可以。Flexbox不是必须的，但看起来是一个不错的选择。 - Vadym Borodin

Flexbox在Safari中不受支持，这意味着您可能必须开发一个非Flexbox的解决方案。 - adamdc78

@adamdc78 - Safari 当然支持 Flexbox。目前只需要加上 -webkit 前缀即可。 - misterManSam

啊，对于7.1+版本来说，知道了真好！ - adamdc78

为什么这个问题没有被关闭？这是一个“替我完成工作”的问题... 没有展示任何代码，OP也没有展示任何尝试的努力。 - Ruddy

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>

- Danield

---

1）在这些图片中，他已经将标题文本设置为固定宽度（而不是采用图像的宽度）。2）另外，图像显示标题文本为左对齐。 - Danield

@Danield，图片应该与标题中的行数相对应。如果标题无法适应屏幕，图片应该缩小直到适应屏幕。 - Vadym Borodin

Answer 2

我想我已经让它工作了，但需要指定图像是竖向还是横向。

你可以在这里实时查看：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;
    }
  }
}

- KreaTief

---

看起来很不错，但是在Firefox中图片无法正确缩放。 - Vadym Borodin

我在Firefox中创建了演示文稿。使用什么屏幕分辨率？我测试了所有常见的分辨率。 - KreaTief

1. 图片宽度超过屏幕，水平被裁剪;
2. 图片在垂直缩小时变形.

- Vadym Borodin

你说得对，那看起来不太好。我会看一下的。但我想这可能没有JavaScript是不可能的。这样可以吗，还是必须只用CSS？ - KreaTief

Answer 3

你是否是指像这样的东西？ 这只是一个简单的例子，但可能是你想要实现的。

.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>

- jbutler483

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>

- Vadym Borodin