使用 'background-size: contains' 在具有背景的弹性框中将内容居中答案

【问题标题】：Centering content in a flex box with a background using 'background-size: contain'使用 'background-size: contains' 在具有背景的弹性框中将内容居中
【发布时间】：2015-10-09 13:58:52
【问题描述】：

首先，here is a Fiddle example。

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

我想问这个问题最简洁的方法是：如何使用background-size: contain 将内容集中在元素上？

我的其他一般性问题：

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

【问题讨论】：

标签： javascript jquery html css flexbox

【解决方案1】：

不清楚你真正想要达到的目标，但我怀疑你只是错过了：

background-position:50% 50%;

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

答案是“原则上没有这种方法”。
<center> 仍然无法通过 CSS 方式完全重现。
对于仅通过 CSS 定义宽度/高度比，请参见，例如，这个： http://www.mademyday.de/css-height-equals-width-with-pure-css.html

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

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

【讨论】：

感谢您的帮助。在 Chrome (jsfiddle.net/w5e7c93n/12) 中查看这个小提琴，看看我想要什么。出于某种原因，它只适用于 Chrome。
我实际上使用 JavaScript 方法解决了这个问题，但这似乎也很好，我计划研究你的纯 CSS 解决方案。感谢您的更新。
好吧，通过使用 JS 解决布局问题，你正在进入原力的黑暗面。
我同意。有趣的是，我刚刚再次检查了您更新的 Fiddle，它仅适用于 Firefox，不适用于 Chrome。我的 Chrome 有什么严重问题吗？
它适用于我这里的 Chrome。事实上，我看不出有什么不能在那里工作。

【解决方案2】：

This Fiddle is actually the behavior I was looking for. JavaScript 由 this post 提供。

但是，它似乎只能在 Chrome 中正常工作；不是 Firefox 或 Internet Explorer。我正在调查，但这应该可以更好地了解我正在尝试做的事情。

代码：

var img = new Image();
var elem = document.getElementsByClassName("section-1")[0];
img.src = window.getComputedStyle(elem, null).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");

function resize() {
    var bgHeight = elem.offsetWidth * img.height / img.width;
    elem.style.height = bgHeight + 'px';
}
window.onresize = resize;
resize();

【讨论】：