Javascriptを使用してdivコンテンツをそのサイズでどのようにスケールするのですか？

ページの中央に配置され、アスペクト比（16：9）が維持されるようにビューポートで拡大縮小されるdivがあります。問題は、サイズ変更時にdiv内でフォントとコンテンツの内部を拡大することですVminはほとんどの場合、問題なく動作します。 vminがビューポートの高さと幅の間の小さな値を直接チェックし、カスタムアスペクト比を設定できないため、divのアスペクト比が1：1の場合は完全に機能します。Javascriptを使用してdivコンテンツをそのサイズでどのようにスケールするのですか？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
    background-color:white; 
} 
.wrapper { 
    width: 95vw; 
    height: calc(95vw * 9/16); 
    max-height: 95vh; 
    max-width: calc(95vh * 16/9); 
    background: center; 
    background-color: blue; 
    background-size:contain; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 
#lorem { 
    color: aqua; 
    font-size:10vmin; 
    text-align:center; 
    position:absolute; 
    transform: translate(-50%, -50%); 
    top: 50%; 
    left: 50%; 
    margin:auto; 
} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <p id="lorem"> 
    This text should scale with div only. 
    </p> 
</div> 
</body> 
</html>

https://jsfiddle.net/Addictorator/70fq44sv/2/

私が話しているかを確認するために垂直方向にウィンドウのサイズを変更します。

私は純粋なCSSの方法があるとは思わない（しかし、それがあれば、それが最も望ましいだろう）が、私はそれがdivのイベントリスナーonresizeを使用してjavascriptで可能であると思うし、 divの高さ/幅を現在のdivの高さ/幅と比較する比で別々に計算されます。または、vminの動作を試して複製できますが、上記のCSSを使用してdivで行われたように、高さを比率に設定して16：9を1：1の代わりに使う方法が考えられます。私は純粋なjsとjqueryを好むでしょう。私は自分自身でこれをやってみましたが、javascriptに関しては私はむしろ素人です。

ありがとうございます！

出典

2017-01-01 Terrornado

これは[重複]（http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container#19814948）です。ビューポートフォント、すべてのCSSソリューションを探しています。 fontsizeの '9vw'はあなたにとって良いかもしれません。 – kabanus

いいえ、そうではありません。私はすでにビューポートユニットを使用しています。もしあなたがそれを読めば、なぜ私の特定のケースでそれがうまくいかないのかを知ることができます。 – Terrornado

それは私のためにあなたのjsのバイブルで動作します。私は 'font-size：10vmin'を' font-size：9vw; 'に変更しました。これはフォントサイズであることに注意してください。 – kabanus

作業コードhereを参照してください。

解決策は非常に簡単です。ウィンドウのサイズを変更すると、親のclientHeightが返されます。返された値を除算することによって、font-sizeとして使用可能な整数が得られます。これをp要素に割り当てます。

これがあなたの問題を解決することを願っています。

//assigns font-size when document is ready 
 
document.onreadystatechange =() => { 
 
    if (document.readyState === 'complete') { 
 
    var wrapperHeight = document.getElementById('wrapper').clientHeight; 
 
    var relativeFontSize = wrapperHeight/10 + 'px'; //change 10 to any integer for desired font size 
 
    document.getElementById("lorem").style.fontSize = relativeFontSize; 
 
    } 
 
}; 
 
//then on window resize 
 
window.onresize = function(event) { 
 
    var wrapperHeight = document.getElementById('wrapper').clientHeight; 
 
    var relativeFontSize = wrapperHeight/10 + 'px'; //change 10 to any integer for desired font size 
 
    document.getElementById("lorem").style.fontSize = relativeFontSize; 
 
};

body { 
 
    background-color:white; 
 
} 
 
#wrapper { 
 
    width: 95vw; 
 
    height: calc(95vw * 9/16); 
 
    max-height: 95vh; 
 
    max-width: calc(95vh * 16/9); 
 
    background: center; 
 
    background-color: blue; 
 
    background-size:contain; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    font-size:60px; 
 
} 
 
#lorem { 
 
    color: aqua; 
 
    text-align:center; 
 
    position:absolute; 
 
    transform: translate(-50%, -50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    margin:auto; 
 
    
 
}

<div id="wrapper"> 
 
    <p id="lorem"> 
 
    This text should scale with div only. 
 
    </p> 
 
</div>

出典

2017-01-01 13:40:10

はい、それは完璧に動作します。これはまさに私が探していたものです！ JavaScriptが無効になっている可能性のあるブラウザのフォールバックとして、CSS（vmin）でfont-sizeを設定してもまだ動作しますか？ – Terrornado

それはうまくいくはずです。私が知っている限り、document.readyState === completeはあなたのcssファイルを含むべきすべてのサブリソースを待ちます。したがって、関数はCSSが読み込まれた後に常に適用されるべきです。 –

似たような解決策が必要な場合は、質問のタイトルを「Javascriptを使用して親の高さに合わせてフォントサイズを調整するにはどうすればよいですか？それらの行に沿った何か。私はそれがあなたが求めていたものと混同された理由だと思います。できるだけ明確にするようにしてください。あなたはそのように最善の答えを得るでしょう。 –

Javascriptを使用してdivコンテンツをそのサイズでどのようにスケールするのですか？

答えて

関連する問題