How to create a responsive ball with css and html?

Question

How to create a responsive ball with css and html?

Navigation

#1 by (8 votes)
#2 by (2 votes)

9

I have a doubt, and that is that for a class work I am trying to create as "a Christmas ball" that I turn, the thing is that the ball has already been made and turned, but there is a problem and that is that if the size I give it with em or with px to make bigger or smaller the screen is still the same size the ball, but if I give the size with percentages to be the width greater than the height there is no way to make it fit well and it is stretching or flattening as you move the page. I leave below what I have for you to see what I mean, give it to see in full page and resize the window. Could someone help me to adjust the size to the size of the window and not be deformed? 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 rel="stylesheet" type="text/css" href="css/home.css">
	</head>

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

html5 html css imagen responsive

asked by alexmaza_wd 06.11.2018 в 17:02

source

2 answers

2

What happens is that the size of your Christmas sphere is in percentages, so 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 prevent the spherical shape from deforming and making it smaller (if necessary) with half querys.

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



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

The advantage of doing so is that you decide the breakpoints where you want the sphere to be resized, since with percentages it will automatically be accommodated, as I mentioned earlier, according to the width of the parent container. It will depend a lot on the use case that you give to know if it suits you more percentages or half queries.

answered by 06.11.2018 в 17:09

Delete an element in a vector in C static? What is it? and what is it for?

score 8 · Accepted Answer

What you must do is to leave the property value height as 0 and assign a padding-bottom of the same size (in percentages) signed to 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>