全屏显示时，用于填充父级IFrame或调整大小的CSS的CSS是什么? [英] What is the CSS to fill parent IFrame, or resize keeping aspect when full screen?
问题描述
我正在移植我写为pixi.js HTML5游戏的游戏，可以将其嵌入itch.io.我的游戏会打印到HTML文件中的 canvas 上.itch.io将该HTML文件嵌入到 iframe 中，并提供全屏按钮，以全屏显示 iframe .
I'm porting a game I wrote to be a pixi.js HTML5 game that I can embed on itch.io. My game prints to a canvas, which is on a HTML file. itch.io embeds that HTML file in an iframe, and provides a full screen button that shows the iframe in full screen.
在CSS缩放之前，我的游戏以720x960的固定分辨率运行. itch.io 具有固定大小的 iframe ，我可以使用其界面进行设置.我将其设置为720x960以匹配游戏.
My game is running at a fixed resolution of 720x960 - before CSS scaling. itch.io has the iframe at a fixed size, that I can set using its interface. I have it set to 720x960 to match the game.
我正在尝试为HTML文件编写CSS，以便按如下所示调整画布的大小:
I am trying to write CSS for the HTML file that will resize the canvas as follows:
- 当显示在
iframe中时，canvas会展开以适合iframe，如果iframe与游戏的长宽比不同. - 当全屏显示时，
canvas会扩展以适合屏幕，并保持宽高比并居中显示在屏幕上.
- When displayed in the
iframe, thecanvasexpands to fit theiframe, maintaining aspect ratio and centering if the aspect ratio of theiframediffers from the aspect ratio of the game. - When displayed in full screen, the
canvasexpands to fit the screen, maintaining aspect ration and centering on the screen.
我尝试了两种半成功的方法:
I've tried two semi-successful approaches:
首先，我尝试使用 canvas {width 100％;高度100％} .这完全适合 iframe ，但是将较小的尺寸扩展为全屏显示的整个屏幕宽度，这意味着较长的尺寸不在屏幕上.
Firstly, I tried using the style canvas { width 100%; height 100%}. This fit the iframe perfectly, but expanded the smaller dimension to the full width of the screen in full screen, meaning that the longer dimension was off the screen.
其次，我尝试使用以下内容:
Secondly, I tried using the following:
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 .
which worked perfectly on full screen, but moved the canvas partially off the iframe (as shown in the screenshot) - with my suspicion being that vh and vw are based on the window, not the iframe.
浏览器获取的HTML(由pixi.js添加画布)如下:
HTML that the browser gets (as the canvas is added by pixi.js) is as follows:
<!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，是什么?
What is the css to include in my html file to have it fit the iframe appropriately, but also expand appropriately when fullscreen?
推荐答案
这是通过以下CSS实现的.需要调整 max-height 和 max-width 以适合宽高比.
This is achieved with the following CSS. The max-height and max-width need to be adjusted to be appropriate for the aspect ratio.
<style>
html, body
{
height: 100%;
margin: 0;
}
body
{
display: flex;
display: -webkit-flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
canvas
{
display: block;
outline: none;
height: 100%;
max-height: 133.333vw;
width: 100%;
max-width: 75vh;
}
</style>
这篇关于全屏显示时，用于填充父级IFrame或调整大小的CSS的CSS是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
