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

Question

我正在建设我的网站，有一个div盒子的问题。 我想找到一种方法冻结该div，使其在某人放大时无法调整大小，但始终保持在中心，即使窗口大小调整。

我已经使用了position fixed，并尝试使用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，但在我调整窗口大小时无法保持纵横比：

.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%;
}

当我调整窗口大小时，它应该如何工作：

发生了什么：

我尝试使用vw和vh，但似乎并没有解决我的问题 :/ 我在互联网上搜索了很多，但找不到适合我的方法。 请问有人可以帮助我吗？

- BruceWawe

---

将宽度和高度分别设置为以vw和vh为单位。 - undefined

使用vw和vh无法解决我的问题:/ - undefined

嗨，展示一个最小工作示例以便更好地帮助您。 - undefined

Answer 1

好的，我想出了一种自己实现的方法：

我过度使用了vw单位。

我使用了具有比例问题的css代码，但使用了vw来调整div的高度与宽度相比。因此，它始终保持纵横比。

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

我还去掉了边距，那是为了使div居中，但这可能会导致问题，比如破坏纵横比。所以现在我使用top和left。

- BruceWawe