在 JavaScript 中保持矩形的纵横比

问题描述

  window.addEventListener('resize',function updateBox() {
  const maxWidth = window.innerWidth * 0.8
  const maxHeight = window.innerHeight * 0.8
  const width = 1024
  const height = 600
  const ratio = Math.min(maxWidth / width,maxHeight / height)
  const Box = document.getElementById("Box")
  console.log(`resize: ${width*ratio}*${height*ratio}`)
  Box.style = `width: ${width * ratio}px;`
  Box.style = `height: ${height * ratio}px;`
});

#Box {
  width: 1024px;
  height: 600px;
  background-color: red;
}

<div id="Box"></div>

这是从一个热门问题 How to resize images proportionally / keeping the aspect ratio? 中提取出来的。它是一个 very popular answer，但它没有提供完美的纵横比。

如您所见，如果您调整浏览器窗口的大小，它看起来很奇怪。它不保持纵横比。这是一些随机计算，使矩形在宽度和高度上跳跃。

我想要像 https://codepen.io/chriscoyier/pen/BZNoev 这样的效果。尝试调整浏览器的大小以查看实际效果。矩形保持其纵横比并保持在中心。

不幸的是我不能使用它，因为它使用 CSS padding-top 所以我不能使用它。我需要使用 JS 来实现这一点，因为我将使用名为 Konva 的 Canvas 库。

我该怎么做？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

aspect-ratio html javascript