Html 如何使用CSS Flexbox将流体图像和标题居中？ 请考虑一个布局，其中一个图像和一个字幕，都是可变尺寸，应该集中在屏幕上。

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

如果一张图片和一个标题足够小，适合屏幕，那么没有什么特别的事情发生，它们只是居中

如果图像和标题与屏幕高度不匹配，则图像会缩小，直到缩小为止

如果图像不适合屏幕宽度，它会缩小，直到它适合屏幕宽度为止

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

更新。如果标题与屏幕不符，则图像应缩小，直到与屏幕不符

这里有一种方法：

（小图片） （宽高比大） （高宽比大）

html，
身体{
保证金：0；
}
wpr先生{
显示器：flex；
对齐项目：居中；
/*垂直对齐*/
证明内容：中心；
/*水平对齐*/
高度：100vh；
}
身材{
文本对齐：居中；
}
菲卡普顿{
宽度：350px；
文本对齐：左对齐；
保证金：0自动；
}
img{
最大宽度：80vw；/*将图像缩小到视口*/
最大高度：80vh；/*将图像缩小到视口*/
}

精彩图片的标题精彩图片的标题精彩图片的标题精彩图片的标题

你的意思是这样的吗？-这只是一个简单的例子，但可能是你想要实现的

.container{
宽度：80%；
身高：100%；
保证金：0自动；
文本对齐：居中；
垂直对齐：中间对齐；
}

我是一个非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的标题

我想我已经成功了，它确实需要您指定图像是纵向的还是横向的

你可以看到它活在她身上：

---

对不起，我真的需要多注意这个问题

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

$figure=$（'figure'）；
$figcaption=$（'figcaption'）；
$img=$（'img'）；
$（窗口）。调整大小（函数（）{
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”）；
身材{
对齐项目：居中；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
证明内容：中心；
保证金：0；
}
img{
显示：块；
最大宽度：100vw；
}
菲卡普顿{
flex：无；
文本对齐：居中；
}

不管是什么食物，
她说
这是什么背景？密码在哪里？这种要求不需要Flexbox。@ralph.m无代码。这应该在没有javascript的情况下完成，并且速度要快。只有现代浏览器才行。Flexbox不是一个严格的要求，但看起来是一个不错的选择。Safari不支持Flexbox，这意味着您可能必须开发非Flexbox解决方案。@adamdc78-。它当前只需要
-webkit
前缀。为什么还没有关闭？这是一个“为我做这项工作”的问题。。。没有显示代码，OP的尝试中没有显示任何努力。@theparagratick 1）在图像中，他已将标题文本设置为某个固定宽度（与获取图像宽度相同）2）图像也显示了左侧的阳离子文本-aligned@Danield，图像应与标题中的行数有关。如果标题不适合屏幕，看起来很不错，但是图像在Firefox中无法正确缩放。我在Firefox中创建了演示。屏幕分辨率是多少？我测试了所有普通的；2） 1.你说得对，那看起来不太好。我来看看。但我认为没有javascript是不可能的。这很好还是只需要CSS？
<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>

// 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;
    }
  }
}