完全に収まるようにコンテナ内のフォントテキストのサイズを変更する

Question

ページのコンテナ内にdivのマトリックスがあり、各divに '1'または '0'が表示されます。

私は私のページの下部に合わせて100％と高さの幅に私のコンテナを設定した場合、私は 規模にできるようにしたいの1のすべてと、コンテナのdivの内側0（0の数1は静的な数値になります。）は、ブラウザのサイズに関係なく、常にコンテナに完全にフィットするように、コンテナの幅と幅を完全に一致させます。 ページの外に出てスクロールバーをトリガする後続の空白または要素。

目標は、フォントは関係なく、画面サイズ（高さの両方と幅）の、正確にコンテナ内に収まるようにサイズ変更することを確認することです。

私は、次のようなスタックオーバーフロー上の複数の同様の質問、見てきました：JavaScript Scale Text to Fit in Fixed Divを、それらはすべてのテキストの特定の行ではなく、私の組み合わせのdivからテキストを拡大するように見えます。 JavaScriptでこれを行う方法はありますか？

あなたがThis Questionにするために要求されているものを見た場合、これは私が欲しい、まさに です。そのQの違いは、コンテナに合うように倍数ではなく、1つのdiv内にいくつかの テキストを使用していることです。ここで

は私のHTMLです：ここでは

<div id="binaryMatrix" style="width: 100%; height: 100%;"> 
    <div>0</div> 
    <div>1</div> 
    <div>0</div> 
    <div>1</div> 
    <div>0</div> 
    <div>1</div> 
    <div>0</div> 
    <div>1</div> 
    ...up to 100 
</div> 

は私のCSSです：

#binaryMatrix div { 
    float: left; 
} 

を参照してくださいフィドル：Fiddle

このプロジェクトはGitHubの上にもある：GitHub - danjonescidtrix/binary-matrix

---

ここに任意のヘルプまたはアドバイスは、あなたが各要素を拡張して、新しいスケールに応じてその左値を配置することができ、事前に

Answer 1

右。 3回目の試み（と私は実際にを行うは、この時間が割れた）。

桁数は固定です。それを100桁としましょう。

数字の幅が幅よりも大きいので、高さの小さいグリッドが必要ですdivs。 10x10は良くないです。代わりに20x5グリッドを設定しましょう。

は、今、私たちが行う必要があるすべてはうまくある：

1. 桁font-sizeだけビューポートの幅に基づいてだろうか大。
2. 数字がどれくらい大きいかfont-sizeは ビューポートの高さのみに基づいてになります;

いずれか小さいほうが数字に適用されますfont-size。

var binaryMatrix = document.getElementById('binaryMatrix'); 
 
var binaryMatrixDivs = binaryMatrix.getElementsByTagName('div'); 
 

 
function applyNewFontSize() { 
 

 
    var newVerticalFontSize = (window.innerHeight/5.5); 
 
    var newHorizontalFontSize = (window.innerWidth/20.5); 
 
    var newFontSize = (newVerticalFontSize > newHorizontalFontSize ? newHorizontalFontSize : newVerticalFontSize); 
 

 
    for (var i = 0; i < binaryMatrixDivs.length; i++) { 
 
    binaryMatrixDivs[i].style.fontSize = newFontSize + 'px'; 
 
    binaryMatrixDivs[i].style.lineHeight = newFontSize + 'px'; 
 
    } 
 

 
} 
 

 
window.addEventListener('resize',applyNewFontSize,false); 
 
window.addEventListener('load',applyNewFontSize,false);

body { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#binaryMatrix { 
 
width: 100vw; 
 
height: 100vh; 
 
} 
 

 
#binaryMatrix div { 
 
display: inline-block; 
 
float: left; 
 
width: 5vw; 
 
height: 20vh; 
 
text-align: center; 
 
color: rgb(163,163,163); 
 
}

<div id="binaryMatrix"> 
 
<div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div> 
 
</div>

Answer 2

をありがとう、感謝しています。

https://jsfiddle.net/f6Lfe8hv/2/

var total_width = 0; 
 
var total_left = 0; 
 
var $divs = $('#binaryMatrix>div'); 
 
var $binaryMatrix = $('#binaryMatrix'); 
 
var scale = 1; 
 

 
$divs.each(function() { 
 
    total_width += $(this).width(); 
 
}); 
 

 
function full_width() { 
 

 
    scale = $binaryMatrix.width()/total_width; 
 

 
    $divs.css('transform', 'scale(' + scale + ')'); 
 

 
    $divs.each(function() { 
 

 
    $(this).css('left', total_left); 
 

 
    total_left += $(this).width() * 1; 
 

 
    }); 
 

 
    total_left = 0; 
 
} 
 

 
full_width(); 
 

 
$(window).resize(function() { 
 

 
    full_width(); 
 

 
})

#binaryMatrix div { 
 
    position: absolute; 
 
    transform-origin: left; 
 
} 
 

 
#binaryMatrix { 
 
    top:0; 
 
    left:0; 
 
    background: pink; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="binaryMatrix" style="width: 100%; height: 100%;"> 
 

 
    <div>some_test_value</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>0</div> 
 
    <div>1</div> 
 
    <div>another_test_value</div> 
 

 
</div>

Answer 3

私は別のが、この時に行くことにしました - それは魅惑的な問題だはなく、少なくともため。

私はそれをクラックしたと思います。

var binaryMatrix = document.getElementById('binaryMatrix'); 
 
var binaryMatrixDivs = binaryMatrix.getElementsByTagName('div'); 
 

 
var largestNumberOfRows = 12; 
 

 
for (var i = largestNumberOfRows; i > 0; i--) { 
 
    if (binaryMatrixDivs.length % i === 0) { 
 
     var numberOfRows = i; 
 
     break; 
 
    } 
 
} 
 

 
function changeDivWidth() { 
 
    for (var i = 0; i < binaryMatrixDivs.length; i++) { 
 
    var divWidth = (100/(binaryMatrixDivs.length/numberOfRows)); 
 
    var divHeight = (100/numberOfRows); 
 

 
    binaryMatrixDivs[i].style.width = divWidth + 'vw'; 
 
    binaryMatrixDivs[i].style.height = divHeight + 'vh'; 
 
    binaryMatrixDivs[i].style.lineHeight = divHeight + 'vh'; 
 
    } 
 
} 
 

 
window.addEventListener('load',changeDivWidth,false);

body { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
#binaryMatrix { 
 
width: 100vw; 
 
height: 100vh; 
 
} 
 

 
#binaryMatrix div { 
 
display: inline-block; 
 
float: left; 
 
width: 0; 
 
height: 0; 
 
line-height: 20vh; 
 
text-align: center; 
 
} 
 

 
#binaryMatrix div:nth-of-type(odd) { 
 
background-color: rgb(191,191,191); 
 
} 
 

 
#binaryMatrix div:nth-of-type(even) { 
 
background-color: rgb(127,127,127); 
 
}

<div id="binaryMatrix"> 
 
<div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div><div>0</div><div>1</div> 
 
</div>

---

注

1）あなたは、numberOfRowsの値を変更することによって、行の数を決定することができます。 numberOfRowsが5に設定されている場合は、ウィンドウがどれほど短いか、縦または横または幅が狭い場合でも、は常に 5行になります。

2）明らかに、numberOfRowsをdivの数の要素にしたいと思うでしょう。あなたは100件のdivまたは90のdivを持っていますが、あなたは96のdiv要素を持っている場合、あなたはnumberOfRowsは4または6または12または96

---

改善のいくつかの他の要因になりたいでしょうのであれば5行が良いです。

スクリプトの最初のバージョンではにはが手動で行数を宣言するため、上記の2つの注釈が必要でした。スクリプトの2番目のバージョン（上記）では、必要に応じて手作業で行数を宣言できますが（わずかに手間がかかりません）、手作業で最大数の行を手動で宣言できます（たとえば、14行以下）、スクリプトはという要素が見つかるまで、14 からカウントダウンします。最初の要因はnumberOfRowsです。

これにより、毎回numberOfRowsをリセットすることなく（手動または動的に）divの数を変更できます。