0

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

25% de resolución 100% de resolución

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.

6
  • Prueba a ponerle tamaño fijo, con un width y un height, 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.
    – Maida
    Commented el 6 abr. 2022 a las 7:50
  • Probé con lo del width y el height y no funcionó, la imagen es un png, así que no se puede achicar más (Probé en Photoshop) No se que podrá ser, todavía no jugué con los query (Creo que se llama así) Básicamente no está adaptado para celular, sin embargo, cuando uno acerca la pantalla no deberían de moverse así Commented el 6 abr. 2022 a las 12:45
  • Cuando utilizas la etiqueta 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 ponerle style="width: 300px" a tu etiqueta <img> donde estés cargando la imagen
    – Maida
    Commented el 6 abr. 2022 a las 13:51
  • @Maidagan Eso solo me aplasta la imagen, sigo teniendo el mismo problema :,c Creo que es el left y el top, xq si le pongo right en vez de left, cuando bajo el zoom se va para la derecha en vez de irse para la izquierda, ahora, la pregunta es, como coloco una caja que vaya ajustando su tamaño a medida que la resolución sea mayor o menor, y así no deformar las imágenes Commented el 7 abr. 2022 a las 11:18
  • Y lo que quieres es que se quede por ejemplo en la esquina superior izquierda?
    – Maida
    Commented el 7 abr. 2022 a las 11:21

1 respuesta 1

0

Encontré la solución y era más simple de lo que creía: solo en el height tienen que utilizar valores de vw y no de px o %, por ejemplo, height: 30vw; con esto, verificará el width de la pantalla y tendrá el mismo tamaño relativo según la pantalla que lo utilice, luego, para que los botones no se movieran, los metí a una caja estática con un div el cual se encuentra centrado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.