时间戳

首页 > 解决方案 > 在 JavaScript 中保持矩形的纵横比

javascript - 在 JavaScript 中保持矩形的纵横比

问题描述

我有以下Codepen：

  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>

这是一个流行的问题如何按比例调整图像大小/保持纵横比？. 这是一个非常受欢迎的答案，但它没有给出完美的纵横比。

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

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

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

我该怎么做？

标签： javascripthtmlcssaspect-ratio

解决方案

推荐阅读