如何防止 <div> 元素在缩放时被调整大小

Question

我正在构建我的网站，但我遇到了 div 框的问题。我想找到一种方法来冻结 div，因此当有人放大时它无法调整大小，但即使 window 已调整大小，它也始终保持在中心。

我已经固定了位置，我尝试使用以 px 为单位的宽度和边距，代码如下：

.wmenu {
position: fixed;
left: 50%;
top: 50%;
width: 180px;
height: 180px;
margin-left: -90px;
margin-top: -67px; 
background-color: rgb(13, 70, 155) ;
border-radius: 50%;
}

但如果我这样做，它会在有人放大时调整大小。

所以我尝试了该代码，它冻结了 div，但如果我调整 window 的大小时不会保持纵横比：

.wmenu {
position: fixed;
height: 28vh;
width: 13.5vw;
top: 50%;
left: 50%;
margin-top: -4.9%;
margin-left: -6.7%;
background-color: rgb(13, 70, 155) ;
border-radius: 50%;
}

当我调整 window 大小时它应该如何工作：

会发生什么：

我尝试使用 vw 和 vh 但它似乎没有解决我的问题:/ 我在互联网上搜索了很多，但找不到适合我的方法。

有人可以帮我吗？

Answer 1

好的，我自己想出了一个办法：

我用坏了 vw 单位。

我使用 css 代码来解决比率问题，但使用 vw，它会根据宽度调整 div 的高度。所以它总是保持纵横比。

.wmenu {
position: fixed;
height: 14.5vw;
width: 14.5%;
top: 38.8%;
left: 42.75%;    
}

我还删除了边距，那是为了居中 div，但它会产生问题，例如纵横比损坏。所以我现在使用顶部和左侧。

如何防止 <div> 元素在缩放时被调整大小

How to prevent a <div> element from being resized when zooming

html

css

resize

window

web