Question

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

Comments

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" ?

---

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

Answer 1

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/

Answer 2

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!