0

Estoy haciendo una pagina principal de un proyecto.

Con full resolucion se ven bien sus elementos (logo "zoo park" y boton jugar)

full resolucion

Pero cuando empiezo a disminuir la resolucion, se cortan los elementos. Aca se ve como se corta el boton jugar:

Elemento cortado

Alguna idea de como puedo resolver este problema?

Mi html + css:

#outPopUp { 
    /* This image will be displayed fullscreen */
	background:url(../images/logo_granja_6.gif) no-repeat center center;
	
	/* The Magic */
	background-size:cover;
    position: absolute;
    left: 15%;
    bottom:20%;
    width: 65%;
    height: 85%;

}

.btn-enter {
   outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;

    background: url(../images/btn_jugar3.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 70%;
    left: 27%;
    width:40%;
    height: 25%;

   
}
.btn-enter:hover {
    outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;

    background: url(../images/btn_jugar3.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 70%;
    left: 26%;
    width:41%;
    height: 25%;
}
.btn-enter:active {
    outline: 0;
   -webkit-box-shadow: none;
   box-shadow: none;

    background: url(../images/btn_jugar3.png) no-repeat center center;
    background-size:cover;
    position:absolute;
    top: 70%;
    left: 24%;
    width:43%;
    height: 25%;
}
<div class="preview-item shake shake-slow" id="outPopUp"></div> 

<button type="button" class="btn btn-enter"></button>

2
  • 1
    Por favor editen el titulo: "Elementos html se cortan"
    – Oren Diaz
    Commented el 20 sept. 2017 a las 22:19
  • usa img en lugar de button, con img no sera necesario el background, entonces como son porcentajes se reajustara con el zoom
    – juliocpiro
    Commented el 20 sept. 2017 a las 22:45

4 respuestas 4

2

Saludos Oren, A ver, no has incluido todo el HTML donde se encuentra tanto el fondo, como el logo, como el botón. Suponiendo que el elemento "#outPopUp" es la ventana del fondo de la granja, mediante tu CSS la estás colocando en posición absoluta, bien, pero lo que quieras meter dentro de los límites de este elemento de fondo (como el botón de jugar) deberías también incluirlo dentro del elemento para que responda igual a los cambios de redimensionado.

Yo creo que si en vez de darle un fondo al botón, le asocias un elemento imágen lo podrías controlar mejor:

<button type="button" class="btn btn-enter"><img src="images/btn_jugar3.png" /></button>

Luego en el CSS ya tratas esta imágen adecuadamente (por ejemplo "width:100%").

No sé si me he explicado pero te adjunto el trozo de CSS y el HTML que yo más o menos le pondría (por cierto te he suprimido código que considero redundante):

#outPopUp { 
    /* This image will be displayed fullscreen */
	background:url(images/logo_granja_6.jpg) no-repeat center center;
	/* The Magic */
	background-size:cover;
    position: absolute;
    top: 5%;
    left: 15%;
    bottom:20%;
    width: 65%;
    height: 85%;
}
.btn-enter {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background:none;
    background-size:cover;
    position:relative;
    display:block;
    margin:auto;
    border:none;
    cursor:pointer;
    top: 70%;
    width:40%;
    height: 25%;

   
}
.btn-enter:hover {
    width:41%;
}
.btn-enter:active {
    width:43%;
}
.btn-enter img{
    width:100%;
}
<div class="preview-item shake shake-slow" id="outPopUp">
    <button type="button" class="btn btn-enter">
        <img src="images/btn_jugar3.png" />
    </button>
</div> 

1
  • 1
    Muchas gracias Tron! Me sirvieron mucho tus consejos. El div 'outPopUp' tiene un efecto animado, se mueve solo cuando le posicionas el cursos, asi que ahi no podia dejar el boton, pero me hice otro div y despues segui tus consejos.
    – Oren Diaz
    Commented el 21 sept. 2017 a las 2:01
2

Se corta porque la imagen es mas grande que el porcentaje que le estas dejando para que la imagen del boton se muestre, en la maxima resolucion el resultado de los porcentajes es mayor , que en una resolucion menor. Por ejemplo la imagen ocupa 50 pixeles (la imagen de fondo del boton) y tu le estableces un ancho largo etc con porcentajes, si el resultado del porcentaje segun la resolucion el mayor que los 50 px que ocupa la imagen entonces aparecerá entera, en cambio si el resultado del porcentaje de espacio en la pantalla que dejas para el boton es menor que esos 50 px la imagen no podra salir entera.

1

En el btn-enter no utilices un background, utiliza mejor una etiqueta img y le dices que tenga un width: 100%, esto adaptará la imagen a cualquier tamaño que tenga su elemento padre y así no se te cortará

1

Gracias a todos.

Voy a probar img en vez de background.

Otra solucion que encontre es abarcar todas las resoluciones mas utilizadas por monitores y dispositivos moviles con la funcion css:

@media (max-width:'resolucion'px)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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