html - 在 Canvas 中制作根据纵横比缩小的响应式浏览器窗口

Question

我想制作一个浏览器窗口，例如：

我从https://tailwindcss.com/中挑选了这张图片

当您在 Canvas 中调整 Chrome 浏览器窗口的大小时，如何使响应式浏览器窗口缩小和扩大？

注意：我不想让浏览器窗口的宽度等于window.innerWidth. 我希望它具有大小1024*600并保持16 / 9.

我无法弄清楚数学。我也不能用CSS 保持 div 的纵横比，因为没有填充底部。

我什至阅读了https://css-tricks.com/aspect-ratio-boxes/但这不是我想要的。

我有width，height&&aspectRatio想要制作一个响应矩形而不使用padding-bottom.

标签： htmlcsscanvashtml5-canvaskonvajs

Answer 1

您可以尝试添加width: 100%到元素。