Question

我有一个以页面为中心的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中使用事件监听器onresize和扩展每个元素是可能的通过将原始（或之前 - 将其存储为var）div高度/宽度与当前div高度/宽度进行比较的比率单独分开。或者它可以尝试复制vmin行为但是将高度设置为16：9的比率而不是1：1，就像使用上面的css在div上所做的那样。如果可能的话，我更喜欢纯粹的js而不是jquery。我自己尝试过这样做，但是当涉及到javascript时我很讨厌。

提前致谢！

Answer 1

请参阅正常工作的代码集that very document you linked in your post。

解决方案非常简单。在窗口调整大小时，我们返回父窗口的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>

如何使用Javascript按比例缩放div内容？

1 个答案: