Question

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

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

我有其他一般性问题：

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

Answer 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;来定义容器的大小。使用绝对位置将文本刻在该容器中。

Answer 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();

使用＆background;背景大小将背景中的内容置于背景中：包含＆＃39;

2 个答案: