entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Cuadrar una imagen con un input con CSS en Django

Slaudos.
Tengo en mi template una imagen que me gusta mucho para la parte del login. Ahí coloqué dicha imagen y le cuadré dos inputs correspondientes a usuario y contraseña. Mi problema es que cada vez que cambia el zoom del navegador, se descuadran totalmente. Cómo puedo solucionarlo de forma que independientemente del zoom de mi navegador, permanezca siempre cuadrado como lo dejé.
Gracias de antemano.
Firefox, zoom 133%: Toma1
Firefox, zoom 100%: Toma2

0voto

Leonardo-Tadei comentado

Podrías poner la porción de código y el CSS o al menos una imagen para poder saber de qué estás hablando con "cuadrar la imagen con 2 input" ?

0voto

ibrames comentado

Hola Leonardo... ya edité el post, por favor ve las imágenes. Gracias.

2 Respuestas

1voto

white Puntos75880

crea una envoltura con position: fixed y transform: translate(-50%, -50%); para centrarlo y asi se mantendra en el centro junto con los input.

la clases podria ser:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

ejemplo:

http://jsfiddle.net/3szyowpx/1/embedded/result/

1voto

Leonardo-Tadei Puntos227320

Hola @ibrames,

por las imágenes, parece que pusiste el círculo naranja y las demás decoraciones como una imagen de fondo de la página.

Si es este el caso, podrías poner esa imagen como parte de un DIV
(no como fondo) y poner el formulario con la propiedad CSS z-index por delante.

De esta forma, el zoom le afectará a ambas cosas por igual y no se te correrá al hacer zoom o a diferentes resoluciones.

Si no es este el caso, necesitaremos al menos una versión estática (hecha por ejemplo con el navegador al "guardar página como") de la página funcionando para ver cómo se comporta...

Seguimos!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta