jquery - 缩放 div 层中的文本与容器 bg-image 成比例

Question

以下问题:我有一个包含很多 div 的滚动页面。每个 div 都有一个 bg-image 和另一个带有文本的 div。

 <div id="intro">
            <h1>blabla</h1>
            <p id="text1_1"> another bla bla </p>
            <p id="text1_2"> and again bla </p>
 </div>

我使用 css3 的 background-size: cover; 处理 bg-image 缩放，当我缩放浏览器窗口时，文本不会停留在同一位置，也不会与 bg 成比例地调整大小-图像。最好的方法是什么？谢谢

Answer 1

很遗憾，没有解决您问题的纯 CSS 方法。有一个 jQuery 插件可以为您解决问题，称为 FitText .

问题是要让它工作，font-size 属性应该是灵活的，而现在不是。仅使用 CSS 解决此问题的唯一方法 - 如果您正在寻找这样的解决方案 - 是进行媒体查询并减小较小视口(viewport)中的字体大小，但这只会使文本自适应。