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

user_15227510 0
Viewed 864

I'm building my website, and i have a problem with a div box. I would like to find a way to freeze that div, so it cannot be resized when someone zoom in, but keep it always in the center, even if the window is resized.

I already have position fixed, and i tried using width and margin in px, with this code :

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

But if i do that it will resize when someone zoom in.

So i tried that code, that froze the div, but doesn't keep the aspect ratio if i resize the 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%;
}

How it should work when i resize the window :

How it should work

What happens :

Glitch

I tried to use vw and vh but it didn't seem to solve my problem :/ I searched a lot on internet but i can't find a way that work for me.

Can someone help me please ?

web window resize css html
1 Answers

Ok, I came up with a way to do that myself :

I was using badly the vw units.

I used the css code with the ratio problem, but with vw, which resize the height of the div in comparison with the width. So it always keeps the aspect ratio.

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

I also removed the margin, that was to center div, but it can create problem, such as the broken aspect ration. So i'm using top and left now.

user_152275100
Related