如何让画布填充 div，同时保持它的纵横比？

Question

我在 flexbox 中有一个可以调整大小的画布元素。 如何让画布填充可用空间而不丢失其纵横比 (2/3)，并且不被切断？

（我想更改 CSS 尺寸，而不是画布分辨率）。

我尝试过使用

object-fit: contain

和

clamp(...)

，但我无法得到我想要的结果。画布要么不保持其纵横比，要么在其容器之外生长。

body {
  margin: 0;
}

#mainContent {
    background: grey;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

#someOtherElem {
    background: red;
    width: 200px;
    height: 200px;
    margin-left: 1rem;
}

#canvasContainer {
    display: flex;
    flex: 1;
    height: 100%;
    justify-content: center;
    align-items: center;
}

canvas {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    background: green;
    object-fit: contain;
}

<div id="mainContent">
  <div id="someOtherElem"></div>
  <div id="canvasContainer">
    <canvas height="300" width="200"></canvas>
  </div>
</div>

这是我一直在尝试的精简版：https://jsfiddle.net/mwq4502v/.

我不确定实现此目标的最佳方法是什么，因此将不胜感激任何帮助！

Answer 1

您可以为

aspect-ratio

指定

2 / 3

的

canvas

和

100%

或

<parent-height> * 2 / 3

的宽度，以较小者为准。

canvas {
  aspect-ratio: 2 / 3;
  width: min(100%, 100vh * 2 / 3);
  /* ...or height: min(100%, calc(100vw - 210px) * 3 / 2). Same spirit. */
}

一些数学：

让容器的宽度和高度分别为

w

和

h

。由于画布需要尽可能大，因此它总是会触及容器的至少两个边界（或全部 4 个），这意味着它的大小可以是

w / (w / (2 / 3))

或

(h * 2 / 3) / h

，具体取决于容器的大小。

w / h

>

2 / 3

:

◄──────────── w ────────────►
┌────────┬─────────┬────────┐ ▲
│        │         │        │ │
│        │         │        │ │
│        │         │        │ │
│        │         │        │ h
│        │         │        │ │
│        │         │        │ │
│        │         │        │ │
└────────┴─────────┴────────┘ ▼
         ◄ (h*2/3) ►

w / h

<

2 / 3

：

         ◄─── w ───►
         ┌─────────┐ ▲
         │         │ │
       ▲ ├─────────┤ │
       │ │         │ │
       │ │         │ │
 (w*3/2) │         │ h
       │ │         │ │
       │ │         │ │
       ▼ ├─────────┤ │
         │         │ │
         └─────────┘ ▼

这意味着宽度需要是

min(w, h * 2 / 3)

或者，在 CSS 中，

min(100%, 100vh * 2 / 3)

.

试试看：

canvas {
  aspect-ratio: 2 / 3;
  width: min(100%, 100vh * 2 / 3);
}

/* Demo only */

#canvasContainer {
  outline: 1px solid #000; /* Just so we know where it is */
}

body {
  margin: 0;
}

#mainContent {
  display: flex;
  align-items: center;
  height: 100vh;
}

#someOtherElem {
  margin-left: 1rem;
  width: 200px;
  height: 200px;
  background: red;
}

#canvasContainer {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

canvas {
  background: green;
}

<div id="mainContent">
  <div id="someOtherElem"></div>
  <div id="canvasContainer">
    <canvas></canvas>
  </div>
</div>