全屏显示时，用于填充父级IFrame或调整尺寸的CSS是什么？]

问题描述 投票：0回答：1
我正在移植我写为pixi.js HTML5游戏的游戏，可以将其嵌入itch.io。我的游戏打印到HTML文件中的canvas。 itch.io将该HTML文件嵌入到iframe中，并提供全屏按钮以全屏显示iframe。

我的游戏在CSS缩放之前以720x960的固定分辨率运行。 itch.io具有固定大小的iframe，我可以使用其界面进行设置。我将其设置为720x960以匹配游戏。

我正在尝试为HTML文件编写CSS，以便按如下所示调整画布的大小：

    [当显示在iframe中时，canvas会扩展以适合iframe，如果iframe的纵横比与游戏的纵横比不同，则保持纵横比和居中。
  1. 全屏显示时，canvas会扩展以适合屏幕，并保持宽高比并居中显示在屏幕上。
  2. 我已经尝试了两种半成功的方法：

首先，我尝试使用样式canvas { width 100%; height 100%}。这完全适合iframe，但在全屏模式下将较小的尺寸扩展到屏幕的整个宽度，这意味着较长的尺寸不在屏幕上。

第二，我尝试使用以下内容：

canvas, html, body { margin: 0; padding: 0; } canvas { max-width: 100vw; max-height: 100vh; position: absolute; } @media (min-width: 75vh) { canvas { width: 75vh; /* (720 / 960) * 100*/ height: 100vh; left: 50%; transform: translateX(-50%) } } @media (max-width: 75vh) { canvas { width: 100vw; height: 133.333vw; /* (960 / 720) * 100 */ display: flex; top: 50%; transform: translateY(-50%) } } 

[它在全屏上完美工作，但是将画布从iframe部分移开（如屏幕截图所示）-我怀疑vh和vw是基于窗口的，而不是iframe 。Second approach with the canvas off the screen

浏览器获取的HTML（因为pixi.js添加了画布）如下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>webpack App</title> <style> <!-- CSS as above is here --> </style> </head> <body> <canvas width="720" height="960" style="touch-action: none; cursor: inherit;"></canvas> <script src="bundle.js"></script> </body> </html> 

要在HTML文件中包含以使其适合iframe并在全屏显示时也可以适当扩展的CSS是什么？

我正在移植我写为pixi.js HTML5游戏的游戏，可以将其嵌入itch.io。我的游戏打印到HTML文件上的画布上。 itch.io将该HTML文件嵌入到iframe中，并提供完整的...

html css iframe pixi.js
1个回答
0
投票
这是通过以下CSS实现的。需要调整max-height和max-width以适合纵横比。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.