CODEWITHSUNDEEP
htmlcsswebresizewindow
BruceWawe
BruceWawe

Reputation: 51

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

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 ?

Upvotes: 3

Views: 3498

Answers (1)

BruceWawe
BruceWawe

Reputation: 51

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

I was badly using 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.

Upvotes: 2

Related Questions