2

アイコンはhttp://fontello.com/のフォントの一部です

なので基本はテキストです。ここで、コンテナ要素に合わせてテキストのサイズを変更することについて多くの質問を読みましたが、解決策はないようです。

しかし、問題はアイコンが少し違うということです - それは常に単一の文字です. これにより、コンテナ要素の100％のサイズにサイズ変更できると思っていました。可変長の文字列ではなく、文字のサイズだけを調べる必要があるためです。

どうすればそれを行うことができるかについてのアイデアはありますか?

4

1 に答える 1

1

純粋な CSS を使用して考えられる最も近いものは、次のようなものです。

.container {
    width:1em;
    height:1em;
    border:1px solid red;
    font-size: 100px;
}

.container span {
    font-size:1em;
    line-height:1em;
}

http://jsfiddle.net/t73yT/

font-size をコンテナーのサイズに設定し、em を使用してコンテナーの幅/高さを指定します。あなたのアイコンフォントにはパディングがなく、通常のフォントではできないことがあるかもしれません.

次のjavascriptオプションもあります。

$(document).ready(function(){
    var w = $('div').outerWidth();
    $('div').css('fontSize', w+'px');
});

http://jsfiddle.net/YbUef/1/

しかし、これはほとんど同じことを行い、フォントファイルにあるスペース/パディングによって制限されます.

于 2013-11-06T15:08:31.327 に答える