Basically I have some images position:absolute;
which will work as buttons. The problem comes as soon as I move the screen away or closer: the buttons move position. I don't know how to fix it.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>DEP</title>
<link rel="shortcut icon" href="">
</head>
<body>
<header>
<?php include_once "include/header.php";?>
</header>
<div class="botonlogo">
<img src="img/logos/cubito.png" style="position:absolute; max-width: 100%; height: auto; left:339px; top:80px;">
</div>
<?php
include_once "include/footer.php";
?>
</body>
</html>
.botonlogo{
position: relative;
}
.botonlogo >img:hover {
transform: scale(0.7);
border-radius: 100px;
z-index:10;
}
.botonlogo > img {
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
transform: scale(0.5);
transition: all .5s ease;
}
I am using an example image with nothing more than a disproportionate size so that the difference can be noticed. Between the two images the only thing that happened was that I changed the resolution, however, I deduce that the problem lies in the right and the top, the problem is that I don't know any other way to position the images that have a position:absolute
.
I found the solution and it was simpler than I thought: only in the height do you have to use vw values and not px or % , for example,
height: 30vw
; with this, it will check the width of the screen and it will have the same relative size depending on the screen that uses it, then, so that the buttons do not move, I put them in a static box with a div which is centered.