字体大小响应填充父 div 的 100% 宽度？ [复制]

Question

我正在尝试获取 h1 元素的内容以调整字体大小，以确保文本恰好填充其父 div 宽度的 100%。

我尝试了几个不同的插件，包括 fittext.js、slabtext.js 和 bigtext.js，但都无法使用。

有谁知道我如何在下面的示例中为 .sectionTitle h1 元素获得这种效果。

Codepen：https://codepen.io/anon/pen/NpYJKK.

示例 HTML：

 <section id="contact">

   <div class="sectionContent">

     <h1 class="sectionTitle">Contact</h1>

   </div>

 </section> 

Answer 1

FitText.js 应该做你需要的。

添加necessary js files，然后将此行添加到您的代码中：

jQuery(".sectionTitle").fitText(.5);

请注意，.5 的压缩值似乎是使您的文本拉伸全宽所必需的。

codepen demo

Answer 2

使用vw属性：

font-size:100vw;