Básicamente tengo unas imágenes con position:absolute;
las cuales funcionarán como botones. El problema llega en cuanto alejo u acerco la pantalla: los botones se mueven de posición. No sé cómo solucionarlo.
<!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;
}
Estoy utilizando una imagen de ejemplo nada más con un tamaño desproporcionado para que se note la diferencia. Entre las dos imágenes lo único que sucedió fue que le cambié la resolución, sin embargo, deduzco que el problema radica en el right y el top, el problema es que no conozco otra manera de posicionar las imágenes que tienen un position:absolute
.
width
y unheight
, puedes utilizar porcentajes o píxeles según te combenga, de esta manera solucionarías en gran parte tu problema. De todas maneras, yo pienso que se mueve porque la imágen que estás utilizando tiene algo de fondo, y es más grande que el cuadrado de tu imagen. Puedes probar a ajustarla también.width
, le da igual el tamaño original que tenga, este lo va a adaptar como tu quieras. En caso de que le hayas puesto, y no haya cambiado nada, será que la has puesto mal. Prueba a ponerlestyle="width: 300px"
a tu etiqueta<img>
donde estés cargando la imagen