9

Estoy creando "un bola de navidad" que gira. El problema y es que si el tamaño se lo doy con em o con px al hacer mas grande o mas pequeña la pantalla sigue siendo del mismo tamaño, pero si le doy el tamaño con porcentajes al ser el ancho mas grande que el alto no hay manera de hacer que cuadre bien y se va estirando o achatando según vas moviendo la pagina.

Os dejo a continuación lo que llevo para que veáis a lo que me refiero, dadle a ver en pagina completa y redimensionar la ventana.

Alguien podría ayudarme para que se ajuste el tamaño al tamaño de la ventana y que no se me deforme?

Gracias!

:root,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div.bolaNavidad {
  left: 10%;
  top: 10%;
  height: 10%;
  width: 5%;
  background-image: url(https://preview.ibb.co/n3pJdV/bolamod.png);
  background-size: cover;
  background-repeat: repeat;
  border-radius: 50%;
  position: absolute;
  box-shadow: -.75em -.25em 0 0 rgba(0, 0, 0, .1) inset, .2em .1em 0 0 rgba(255, 255, 255, .2) inset;
  animation: bolas 40s infinite linear;
}

@keyframes bolas {
  from {
    background-position: left center;
  }
  to {
    background-position: -800px center;
  }
}
<!DOCTYPE html>
<html lang="es">

<head>
  <title>Navidad</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/home.css">
</head>

<body>
  <div class="bolaNavidad"></div>
</body>

</html>

2 respuestas 2

10

Lo que debes hacer es dejar el valor de la propiedad height como 0 y asignar un padding-bottom del mismo tamaño (en porcentajes) signado al width:

:root, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div.bolaNavidad {
  left: 10%;
  top: 10%;
  width: 20%;
  height:0;
  padding-bottom: 20%;
  background-image: url(https://preview.ibb.co/n3pJdV/bolamod.png);
  background-size: cover;
  background-repeat: repeat;
  border-radius: 50%;
  position: absolute;
  box-shadow: -.75em -.25em 0 0 rgba(0,0,0,.1) inset,
  .2em .1em 0 0 rgba(255,255,255,.2) inset;
  animation: bolas 40s infinite linear;
}

@keyframes bolas {
  from {
    background-position: left center;
  }

  to {
    background-position: -800px center;
  }
}
<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Navidad</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/home.css">
  </head>

  <body>	
    <div class="bolaNavidad"></div>
  </body>
</hmtl>

2
  • 1
    Muchisimas gracias! Asi si que me funciona, un saludo! Commented el 6 nov. 2018 a las 16:23
  • 1
    Creo que sería muy bueno que añadieras una pequeña explicación de porque poner padding-bottom en vez de height. Commented el 6 nov. 2018 a las 22:32
2

Lo que pasa es que el tamaño de tu esfera de navidad la tienes en porcentajes, por eso se va a ir estirando dependiendo del tamaño de tu contenedor padre, lo que podrías hacer es darle un ancho y alto fijo de la misma medida y así evitar que la forma esférica se deforme e irla haciendo más chica (de ser necesario) con media querys.

div.bolaNavidad {
    height: 100px;
    width: 100px;
}



@media only screen and (max-width: 767px){
      div.bolaNavidad {
        /* Nuevas medidas */
      }
}

La ventaja de hacerlo así es que tu decides los breakpoints en donde quieres que se redimensione la esfera, ya que con porcentajes automáticamente se irá acomodando, como mencioné anteriormente, conforme al ancho del contenedor padre. Dependerá mucho del caso de uso que le des para saber si te conviene más porcentajes o media querys.

3
  • Al usar width y height en px el círculo no será responsive, saludos. Commented el 6 nov. 2018 a las 16:18
  • @Bender Sí, lo sé, por eso dije que una forma era ponerlo en pixeles e ir acomodando mediante media querys. Commented el 6 nov. 2018 a las 16:20
  • Muchas gracias @AarónGutiérrez por la ayuda! Commented el 6 nov. 2018 a las 16:22

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.