I have a doubt, and it is that for a class project 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 that is that if the size I give em or px to make it bigger or smaller, the screen is still the same size as the ball, but if I give it the size with percentages, since the width is greater than the height, there is no way to make it fit well and it will it stretches or flattens as you move the page. I leave you below 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? Thank you!!
: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>
</hmtl>
What you need to do is leave the value of the property
height
as 0 and assign apadding-bottom
equal size (in percentages) sign to thewidth
:What happens is that you have the size of your Christmas sphere in percentages, that's why it will stretch depending on the size of your parent container, what you could do is give it a fixed width and height of the same size and thus avoid that the spherical shape is deformed and make it smaller (if necessary) with media queries.
The advantage of doing it this way is that you decide the breakpoints where you want the sphere to be resized, since with percentages it will automatically adjust, as I mentioned before, according to the width of the parent container. It will depend a lot on the use case you give it to know if it suits you more percentages or average queries.