9

Tengo una duda, y es que para un trabajo de clase estoy intentando crear como "un bola de navidad" que gire, la cosa es que la bola ya la tengo hecha y girando, pero hay un 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 la bola, 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 segun vas moviendo la pagina. Os dejo a continuacion lo que llevo para que veais a lo que me refiero, dadle a ver en pagina completa y redimensionar la ventana. Alguien podria 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>
</hmtl>

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! 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. 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. 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. el 6 nov. 2018 a las 16:20
  • Muchas gracias @AarónGutiérrez por la ayuda! el 6 nov. 2018 a las 16:22

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.