Html 在保持纵横比的同时将整个页面缩放为一个纹理端口_Html_Css_Web

Html 在保持纵横比的同时将整个页面缩放为一个纹理端口

html css web

Html 在保持纵横比的同时将整个页面缩放为一个纹理端口,html,css,web,Html,Css,Web,我有一个页面，上面有一个小游戏，我设计的UI用于分辨率为1280x800（或大约1280x800）的视口。我希望在不同大小的屏幕上保持这种外观，允许页面占据100%的视口宽度，并相应地调整高度。实际上，就像在图像编辑器中使用时一样调整整个页面的大小最初，我用包围标记中的所有元素，并设置宽度：100%但是，此页面将许多元素设置为位置：绝对意味着，当页面的其余部分相应地调整大小时，这些元素保持不变。这也不会改变某些元素的大小，这些元素的大小是在px中设置的，而不是%或ems中设置的 <bod

我有一个页面，上面有一个小游戏，我设计的UI用于分辨率为1280x800（或大约1280x800）的视口。我希望在不同大小的屏幕上保持这种外观，允许页面占据100%的视口宽度，并相应地调整高度。实际上，就像在图像编辑器中使用时一样调整整个页面的大小

最初，我用

包围

标记中的所有元素，并设置

宽度：100%但是，此页面将许多元素设置为位置：绝对意味着，当页面的其余部分相应地调整大小时，这些元素保持不变。这也不会改变某些元素的大小，这些元素的大小是在px
中设置的，而不是%
或ems
中设置的
<body>
    <div id = 'wrapper'>
        <content></content>
    </div>
</body>

我的下一个方法是将页面完全嵌入另一个页面，并使用
元素将其包装在div
中，但是
的内容只是溢出，您必须滚动才能看到页面
<body>
    <div id = 'wrapper'>
        <iframe src = 'game.html' width = '1280' height = '800'></iframe>
    </div>
</body>

我怎样才能做到这一点？理想情况下，只使用CSS和HTML，但我不介意这么多。
假设我正确理解了这个问题，您可以使用百分比填充顶部创建一个比率框。对于一些不同的场景，这是一种有用的模式
它之所以有效，是因为padding top
百分比值从元素宽度而不是高度中获取百分比
下面是一个简单的例子：

.wrapper{
位置：相对位置；
宽度：100%；
填充顶部：62.5%；/*800/1280*/
}
.游戏{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：黑色；
}
.gameui_示例{
位置：绝对位置；
底部：20px；
右：20px；
宽度：60px；
高度：60px；
背景：红色；
}

这项工作非常有效！我认为那些处于绝对位置的元素将需要调整，因为它们似乎无法在另一个分区内重新定位为相对位置，干杯@CallumMcshane很高兴它对你有用！如果绝对元素是.gamediv的子元素，则它们应该相对于它进行定位。我在代码片段中添加了一个小示例。
<body>
    <div id = 'wrapper'>
        <iframe src = 'game.html' width = '1280' height = '800'></iframe>
    </div>
</body>

#wrapper {
    width:100%;
}