使响应式浏览器 window 在 Canvas 中根据宽高比缩小 [重复]

Question

这个问题在这里已经有了答案：

用 CSS 保持 div 的纵横比（37 个答案）

2 年前关闭。

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

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

当您在 Canvas 中调整 Chrome 浏览器的 window 大小时，如何制作响应式浏览器 window 缩小和增大？

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

我无法弄清楚数学。 我也不能使用Maintain the aspect ratio of a div with CSS因为没有要使用的填充底部。

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

我有width ， height和aspectRatio想在不使用padding-bottom的情况下制作一个响应矩形。

Answer 1

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