调整容器内的字体文本（在多个 div 内）以完全适合

Question

所以我在页面的容器内有一个 div 矩阵，每个 div 显示“1”或“0”。

如果我将容器设置为 100% 的宽度和高度以适合我的页面底部，我希望能够 将容器 div 内的所有 1 和 0 缩放（0 和 1 的数量将是一个静态数字，为了这个问题，我们选择 100）到无论浏览器大小调整到什么大小，始终完美适合容器，因此它适合宽度和 容器的高度完美，没有任何尾随空格或离开页面或触发滚动条的元素。

目标是确保字体调整大小以完全适合容器，而不管屏幕大小（高度和宽度）。

我在堆栈溢出中看到了多个类似的问题，例如：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

您可以缩放每个元素，然后根据新的比例定位其左侧值。

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 2

我决定再试一次 - 尤其是因为这是一个有趣的问题。

我想我已经破解了。

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，则 5 行是好的，但如果您有 96 个 div，您将希望 numberOfRows 为 4 或 6 或 12 或其他 96 的因子。

---

改进：

以上两个注释是必要的，因为在脚本的第一个版本中，您必须手动声明行数。在脚本的第二个版本（上面）中，您仍然可以根据需要手动声明行数，但是（稍微省力）您可以简单地手动声明您希望看到的最大行数（例如，不超过 14 行) 并且脚本将从 14 开始倒计时直到找到一个因子 - 它的第一个因子将是 numberOfRows。

这将使您能够更改 div 的数量（手动或动态），而不必每次都重置 numberOfRows。

Answer 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>