Html 将画布安装到窗户上，居中

我画了多个HTML5画布（1到3）在一排。 他们必须：

• 相邻对齐
• 保持它们的纵横比（保持在例如：16:9，不要比例失调）
• 如果窗口比率不完全匹配，则背景图像应可见。。参见图表
• 跨平台

这是我目前的进展：

var CANVASES=3；
对于（变量i=0；i

我不知道css，对我来说，有太多的选择来解决它

我在这里试图遵循一些建议：

…即不使用“调整大小”事件更改画布的大小。 因此，尽可能多地使用css

目前，我将画布的宽度设置为div的%。 当窗户太窄时，这是可以的，但当它不够高时，画布被切断，因此需要不同的方法

另外，我希望画布按照图表居中，我还没有解决这个问题

什么css样式可以帮助我完成任务

---

正如我在评论中提到的，在调整画布大小时，请坚持使用JavaScript。如果使用CSS调整画布大小，图像质量将降低。请注意，您引用的“反模式”文章仍然使用JavaScript（

gl.canvas.width=width

）来调整画布的大小，但它并没有监听

resize

事件来调整画布的大小。（请注意，他没有更改gl.canvas.样式宽度。）

要定位画布，请使用Flexbox。将此CSS添加到您的样式中：

/* Note: you should probably
   give your div a class or ID */
div {
  display: flex;
  align-items: center;
  justify-content: center;
}

---

正如我在评论中提到的，在调整画布大小时，请坚持使用JavaScript。如果使用CSS调整画布大小，图像质量将降低。请注意，您引用的“反模式”文章仍然使用JavaScript（

gl.canvas.width=width

）来调整画布的大小，但它并没有监听

resize

事件来调整画布的大小。（请注意，他没有更改gl.canvas.样式宽度。）

要定位画布，请使用Flexbox。将此CSS添加到您的样式中：

/* Note: you should probably
   give your div a class or ID */
div {
  display: flex;
  align-items: center;
  justify-content: center;
}

---

在调整画布大小时，请坚持使用JavaScript。如果使用CSS调整画布大小，图像质量将降低。请注意，您引用的“反模式”文章仍然使用JavaScript（

gl.canvas.width=width

）来调整画布的大小，但它没有通过

resize

事件来调整大小。谢谢@mfluehr。放置画布的最佳方式是什么？边距？在调整画布大小时，请坚持使用JavaScript。如果使用CSS调整画布大小，图像质量将降低。请注意，您引用的“反模式”文章仍然使用JavaScript（

gl.canvas.width=width

）来调整画布的大小，但它没有通过

resize

事件来调整大小。谢谢@mfluehr。放置画布的最佳方式是什么？边缘