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>