css 如何让画布填充div，同时保持其纵横比？[复制]

xmd2e60i 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(123)

此问题已在此处有答案：

Maintain the aspect ratio of a div with CSS（33答案）
7小时前关闭
我在一个flexbox中有一个可以调整大小的canvas元素。如何让canvas填充可用空间而不丢失其纵横比（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/。
我不知道什么是最好的方式来实现这一点，所以任何帮助将不胜感激！

css

来源：https://stackoverflow.com/questions/75952196/how-do-i-make-a-canvas-fill-a-div-while-keeping-its-aspect-ratio

1条答案

按热度按时间

xbp102n01#

您可以为canvas指定2 / 3的aspect-ratio，为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>

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何让画布填充div，同时保持其纵横比？[复制]

1条答案

相关问题

热门标签

最新问答