如何拉伸文本以占据整个高度和宽度[重复]答案

【问题标题】：How to stretch text to occupy full height and width [duplicate]如何拉伸文本以占据整个高度和宽度[重复]
【发布时间】：2017-02-01 09:18:55
【问题描述】：

我有 div 元素的高度和宽度。在 div 元素中，我有一个字体图标。我想让它伸展到 div 元素的全高和全宽。

Here 是一个显示我尝试过的链接。

【问题讨论】：

我不是 CSS 大师，但我不相信你能做到这一点，除非你将文本图标转换为图像
或 svg - icomoon.io/app/#/select 可以做到这一点。

标签： css

【解决方案1】：

我能想到的唯一方法是将文本包围在它自己的元素中并使用 CSS 转换，但它需要非常特殊的大小，并且需要针对每个图标和情况进行试验。我不相信任何浏览器都支持字体拉伸。

<div class="fa element"><span>&#xf09d;</span></div>

.element span {
  line-height: 0.2;
  display: inline-block;
  transform: scale(1.86,1.15);
  transform-origin: 0 0;
}

更新的垃圾箱：http://jsbin.com/mecodanovo/1/edit?html,css,js,output

【讨论】：

【解决方案2】：

有点可怕的答案，但这是我能想到的唯一方法。您需要添加一个容器，然后使用缩放变换

.container {
  -ms-transform: scale(1.87, 1.16);
    -webkit-transform: scale(1.87, 1.16);
    transform: scale(1.87, 1.16);
    margin-left: 91px;
    margin-top: 2px;
}

下面的完整方法

http://jsbin.com/fiqixudamo/1/edit?html,css,js,output

【讨论】：

抱歉，刚刚看到较早的回答