How to create a responsive ball with css and html?

Question:

I have a doubt, and it is that for a class work I am trying to create a "Christmas ball" that rotates, the thing is that the ball is already made and rotating, but there is a problem and it is that if the size is I give em or px to make the screen bigger or smaller the ball is still the same size, but if I give it the size with percentages as the width is greater than the height there is no way to make it fit well and It stretches or flattens as you move the page. Here is what I have so you can see what I mean, give it a full page view and resize the window. Could someone help me to adjust the size to the size of the window and not deform it? Thanks!!

: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 type="text/css" href="css/home.css">
	</head>

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

Answer:

What you should do is leave the value of the height property as 0 and assign a padding-bottom of the same size (in percentages) assigned to the 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 type="text/css" href="css/home.css">
  </head>

  <body>	
    <div class="bolaNavidad"></div>
  </body>
</hmtl>
Scroll to Top