在 Canvas 中制作根据纵横比缩小的响应式浏览器窗口 [重复]

Posted 2023-03-25

【中文标题】在 Canvas 中制作根据纵横比缩小的响应式浏览器窗口 [重复]

【英文标题】：Make responsive browser window that shrinks according to aspect ratio in Canvas [duplicate]

【发布时间】：2021-04-03 09:32:23

【问题描述】：

我想制作一个像这样的浏览器窗口：

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

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

注意：我不想让浏览器窗口的宽度等于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 的情况下制作一个响应矩形。

【参考方案1】：

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

【讨论】：

我忘了提到浏览器窗口不能等于window.innerWidth，而是具有1024*600 浏览器大小和16 / 9 的纵横比......那会更简单。 ..我会把这个添加到问题中谢谢你的提醒:)

哦，好的，谢谢，抱歉我没听懂你的意思:(