javascript - 使用 'background-size: contain' 在具有背景的 flexbox 中居中内容

Question

开始，here is a Fiddle example .

我试图做的是将内容(即 h1 和 h2)与一个缩放到背景图像当前大小的 flexbox 居中。根据我自己的尝试，我假设这必须是一个 JavaScript 解决方案(例如，我必须计算缩放后背景图像的大小)，但我当然欢迎任何类型的解决方案.

我想最简洁的提问方式是:如何使用 background-size: contain 将内容置于元素中心？

我有的其他一般问题:

1. 无论使用什么 background-size 属性，计算背景图像尺寸的最佳方法是什么？
2. 在这种特定情况下，除了 flex box 之外，还有什么东西可以更好地居中内容吗？使用 cover 时很容易将事物居中，但这似乎是一种全新的球类游戏。
3. 是否可以使用纯 CSS 使 flex-container(由红色边框表示)匹配背景图像的大小和约束？请注意，我最终希望它具有响应性，而不一定要定义静态高度。

Answer 1

不清楚您真正想要实现的目标，但我怀疑您只是错过了:

background-position:50% 50%;

检查:http://jsfiddle.net/farc8h1d/

1. 回答是“原则上没有这种方法”。
2. <center>仍然无法通过 CSS 手段完全重现。
3. 仅通过 CSS 定义宽度/高度比率，请参阅，例如，这: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

更新:我想我已经知道您需要什么了。这是另一个尝试:http://jsfiddle.net/6bzzj3j9/4/

基本思路:使用<img>与 width:100% ; height:auto;定义其容器的大小。文本使用绝对位置刻在该容器中。