如何使用Javascript根据大小缩放div内容？

Question

如何使用Javascript根据大小缩放div内容？

3

我有一个div，它在页面中居中，并按视口比例缩放，以保持其纵横比（16:9）。问题是，我希望字体和内容也随着div的缩放而缩放。vmin基本上没有问题，但如果div的纵横比为1：1，则会完美地工作，因为vmin直接检查视口高度和宽度之间的较小值，而您无法设置自定义纵横比。

<!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 的方法（但如果有的话，那将是最理想的），但我认为可以使用 JavaScript，在 div 上添加一个 onresize 事件监听器，并通过比较原始（或先前 - 将其存储为 var）div 高度/宽度与当前 div 高度/宽度之比来单独缩放每个元素。或者它可以尝试复制 vmin 行为，但将高度设置为一种 16:9 考虑而不是 1:1，就像上面使用 css 的 div 所做的那样。如果可能的话，我更喜欢纯 js 和没有 jquery。我已经尝试过自己做这件事，但我在 JavaScript 方面比较业余。

提前致谢！

- Terrornado

不，不是这样的。我已经在使用视口单位了，如果你仔细阅读一下，就会明白为什么在我的特定情况下出现问题了。 - Terrornado

它在我的js fiddle上运行良好。我将font-size: 10vmin更改为font-size:9vw;。请注意，这是字体大小方面的更改。 - kabanus

抱歉，对我来说仍然有效。请注意，您需要基于视口单位设置字体大小。文本仍然是矩形的“百分比”。您使用哪个浏览器？也许那就是问题所在。在Firefox上看起来很好。 - kabanus

1

不，这个问题并不基于vw或vh单位，尽管结果相似。目前，你所问的纯粹基于容器div的宽度。该div是否应根据浏览器调整其高度？ - Matthew Brent

我正在使用vh（视口高度）来计算最大宽度。这种保持纵横比例的缩放方式不能使用百分比（%）实现，因为百分比将最大宽度直接与视口宽度关联并相互影响。 - Terrornado

显示剩余5条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Brent · Accepted Answer

请查看这里的工作代码pen 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>