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

【问题标题】：How to prevent a <div> element from being resized when zooming如何防止 <div> 元素在缩放时调整大小
【发布时间】：2021-05-20 07:53:36
【问题描述】：

我正在构建我的网站，但 div 框有问题。我想找到一种方法来冻结那个 div，所以当有人放大时它不能调整大小，但即使窗口被调整大小，它也始终保持在中心。

我已经固定了位置，我尝试使用 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 但它似乎没有解决我的问题：/ 我在互联网上搜索了很多，但我找不到适合我的方法。

有人可以帮帮我吗？

【问题讨论】：

设置宽度和高度，分别以vw和vh为单位。
使用 vw 和 vh 不能解决我的问题：/
嗨，展示一个最小的工作示例，以便更好地帮助您

标签： html css web resize window

【解决方案1】：

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

我的大众单位使用不当。

我使用了解决比率问题的 css 代码，但使用了 vw，它调整了 div 的高度与宽度相比。所以它始终保持纵横比。

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

我还删除了边距，即居中 div，但它会产生问题，例如纵横比损坏。所以我现在使用 top 和 left。

【讨论】：