logo标签列表

在容器内缩放多个div中的字体文本，以完美适应大小

javascriptjqueryhtmlcss
5

我在页面中有一个容器，其中包含一组矩阵形式的div，每个div显示的是'1'或'0'。

如果我将容器宽度设置为100％，高度设置为适应页面底部，我希望能够缩放容器内的所有'1'和'0'（0和1的数量是静态的，假设为100），以便无论浏览器大小如何调整，都可以完美地适应容器的宽度和高度，没有任何溢出的空白或元素，也不会触发滚动条。

目标是确保字体大小调整到与容器完全匹配，无论屏幕大小（高度和宽度）。

我在stackoverflow上看到了多个类似的问题，例如：JavaScript Scale Text to Fit in Fixed Div，但它们似乎都是针对某一行文本进行缩放，而不是我的组合div中的文本。是否有办法在JavaScript中实现这一点？

如果您看到这个问题中所要求的内容，这正是我想要的。那个问题的不同之处在于他使用了一个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;
}

查看示例: 示例

该项目也在GitHub上: GitHub - danjonescidtrix/binary-matrix

非常感谢您的任何帮助或建议。

你能创建一个 Fiddle 并分享给我们吗，这样我们就可以一起协作了。 - Aslam
1
没有问题，看到编辑 @hunzaboy - daniel aagentah
所有元素都是1和0吗？ - Alvaro
是的，他们会的 @Alvaro - daniel aagentah
3个回答
1

我决定再试一次 - 至少因为这是一个迷人的问题。

我想我已经解决了它。

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。

我刚想到了一个改进的方法。我们可以动态确定行数...等一下。 - Rounin
谢谢 - 你可以在 GitHub 上为我设计的内容进行署名。我会非常感激。我的 GitHub 是 https://github.com/rouninmedia。谢谢。 - Rounin
我想要的是0和1可以完美地调整大小以适应外部容器。因此，我希望它们不像你所做的那样间隔出来，而是在需要时自动调整大小。 - daniel aagentah
看看这个问题https://dev59.com/SGAf5IYBdhLWcg3wsUbT?noredirect=1&lq=1，如果你看一下问题中最右边的图片示例，那就是我想要实现的效果。唯一的区别是，他使用的是段落，而我要用的是0和1。 - daniel aagentah
你的解决方案中，数字不会调整大小，它们只是简单地分散开来以适应容器。我希望它们都紧挨在一起，没有间隔，只有字体大小调整。这样说清楚了吗？ - daniel aagentah
显示剩余4条评论
1

好的。第三次尝试（我确实做到了这一点）。

数字位数是静态的。我们将其称为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>

这太棒了！我非常感谢你在这方面的支持，看到社区中有积极好奇的开发人员真是太好了。此外，当字体大小缩小时，我该如何消除每行之间的空白？ - daniel aagentah
啊，我认为从 div 中简单地移除 height 属性就可以解决行之间的空白问题！不错。 - daniel aagentah
今晚晚些时候我将会有空，然后会在我的项目中检查并接受这个答案。你非常有帮助，我会在GitHub上给你信用。 - daniel aagentah
0

您可以对每个元素进行缩放，然后根据新的比例设置其左侧位置。

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>

啊，我明白了，问题在于它全部都在一行上，我想让它按照容器的完整高度和宽度进行缩放。 - daniel aagentah
我误解了问题。 - Alvaro
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接