根据 JavaScript 中的宽度使高度响应答案

【问题标题】：Make height responsive according to width in JavaScript根据 JavaScript 中的宽度使高度响应
【发布时间】：2021-01-12 08:13:14
【问题描述】：

我有一个矩形，我想根据宽度做出响应。

目前，我的逻辑是直截了当的：

aspectRatio = 16 / 9
win = {
    width: window.innerWidth,
    height: window.innerHeight,
}

get browser() {
    const width = this.win.width - 250
    const height = width / this.aspectRatio

    return {
        width,
        height,
    }
}

我通过从win.width 中减去侧边栏宽度 250 来计算我的width。

对于我的height，我将width 除以aspectRatio。

但是，当我将窗口大小减小到 ~700 像素时，这会导致高度为 0。

我的应用程序如下所示：

演示→https://gqhhl.csb.app/

CodeSandBox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl

我真正想要的是让那个木瓜鞭矩形响应。我不确定要使用哪种算法？我正在使用 KonvaJS 使用 Canvas，但逻辑在 JavaScript 中。

我如何使其响应和成比例？目前，高度会很快缩短。

【问题讨论】：

标签： javascript html css canvas konvajs

【解决方案1】：

这是我的解决方案：

function App() {
  const store = useStore();
  const { win, browser, aspectRatio } = store;
  const pad = 50;

  const rectWidth = browser.width - pad;
  const rectHeight = rectWidth / aspectRatio;

  return (
    <div className="flex">
      <div id="sidebar">
        <h1 className="text">
          Center <span>papayawhip</span> Canvas
        </h1>
      </div>
      <Stage width={browser.width} height={browser.height} id="konva">
        <Layer>
          <Rect
            width={rectWidth}
            height={rectHeight}
            x={pad / 2}
            y={(win.height - rectHeight) / 2}
            fill="papayawhip"
          />
        </Layer>
      </Stage>
    </div>
  );
}

另外，我换了店铺，所以browser返回画布区：

get browser() {
        const width = this.win.width - 250
        const height = this.win.height

        return {
            width,
            height,
        }
}

演示：https://codesandbox.io/s/react-konva-responsive-canvas-ogk1n

【讨论】：

【解决方案2】：

第一个解决方案

width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */

第二个解决方案

padding-top: calc(9 / 16 * 100%);

【讨论】：

我使用的是 Konva，虽然我很想使用第一种解决方案，但我不能使用填充，因为它是实现我想要的最佳方式。我不能使用它的原因是因为我的组件深入到 2-3 级（使用 React）这就是为什么我想要一个 JS 解决方案

【解决方案3】：

您需要更改 CSS，但说您的组件被深埋了 3 层。与 CSS 文件不同，它位于您的 .tsx 旁边并已导入，因此请使用它！

代码的第 5 行：

import "./styles.css"

将此添加到文件末尾（复制自@deadcoder 解决比率问题的答案）。另请参阅其下方的断点，了解响应式断点的运行方式。这就是你如何在不缩水的情况下做出响应式的事情。

canvas {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

@media screen and (max-width: 1200px) {
    canvas {
      width: 100%;
      height: 400px;
      padding: 0; /* reset the ratio for smaller sizes so you can crop it */
    }
}
@media screen and (max-width: 600px) {
    canvas {
      width: 100%;
      height: 200px;
      padding: 0; /* reset the ratio for smaller sizes so you can crop it */
    }
}

还可以考虑为该画布指定一个 ID 或类以将其单独列出。

如果高度仍然消失得太快，请考虑将整个区域用作画布或使用背景图像

【讨论】：