百分比宽度/高度不正常工作?

body
{
font-family: "Source Sans Pro";
background: hsl(220, 10%, 5%);
color: #FFF;
margin: 0;
overflow: hidden;
}
#game
{
width: 100vmin;
height: 100vmin;
}
#gameWrapper
{
justify-content: center;
}
#ball
{
background-color: #FFF;
position: absolute;
height: 5%;
width: 5%;
border-radius: 100%;
}

<body>
<div id="gameWrapper" style="display: none">
<div id="game">
<div id="padTop"></div>
<div id="ball"></div>
<div id="padBottom"></div>
</div>
</div>
</div>
</body>

在#gamediv中，高度和宽度都被设置为最小视口单位的100%，所以百分比应该是1:1的长宽比。我真的不知道为什么会这样。谁来帮帮我。

如果你的想法是有一个圆球，试试:

body {
font-family: "Source Sans Pro", monospace;
background: hsl(220, 10%, 5%);
color: #FFF;
margin: 0;
overflow: hidden;
}
#game {
width: 100vmin;
height: 100vmin;
}
#gameWrapper {
justify-content: center;
}
#ball {
background-color: #FFF;
position: absolute;
width: 5%;
border-radius: 100%;
aspect-ratio: 1/1;
}

<div id="gameWrapper">
<div id="game">
<div id="padTop"></div>
<div id="ball"></div>
<div id="padBottom"></div>
</div>
</div>

相关内容

最新更新

热门标签：