字体大小响应填充父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

使用vw属性：

font-size:100vw;

Answer 2

FitText.js应该做你需要的。

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

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

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

<强> codepen demo