Código:
Esta es la imagen: http://i.imgur.com/NCPUJYT.png.computadora { background-image: URL(<la imagen>); background-size: contain; background-repeat: no-repeat; background-position: bottom left; width:77vw; height: 65vh; }
Ahora, este div obviamente está tomando el ancho y alto de la ventana para mostrarse (en % con relación al width y height de esta).
Lo que quiero es poder insertar un DIV con contenido dinámico con AJAX que siempre esté ajustado a la "pantalla" del background del primer div.
El problema actual es que como la imagen del div de la computadora está con "contain" - esto no lo puedo cambiar, por el diseño de la página - no logro dar con la proporción correcta del segundo div con el contenido dinámico.
Intenté hacerlo por medio de @media queries, pero esto aparte de que tardaría mucho en ajustarlo, quieren que aunque escales a lo ancho o alto la pantalla, la imagen y el contenido dinámico siempre estén "registrados".
Ahora bien, comprendo que el div con el contenido dinámico no escala de la misma manera que un div con una imagen en contain de background.
Estoy llegando al punto de cortar la imagen de la computadora en 4 partes (izquierda, derecha, la parte de arriba y la parte baja de esta), lo único que me está deteniendo es que este método probablemente no funcione ya que las imágenes tendrán el mismo problema, se verán desfazadas o de distinto tamaño.
Hay que mencionar que el diseño está tomando sus tamaños totales con view-port width y height, por lo que no, nada es fijo en esta página.
¿Cómo podría arreglarlo? El diseño de la página se ve super con la computadora, y si la quito para solo dejar el contenido dinámico flotando como si nada, pues no luce igual...
¿Hay forma de rescatarlo?
Gracias!
-----------------------
Otra forma de hacerlo podría ser... una solución fea pero bueno es solución.
Poner la imágen como "fija" dentro del div que no reaccione en width y height y por medio de @media queries (de acuerdo al ancho) ir cambiando el width y height fijamente de ambos divs, aunque no se vea fluido (que es lo que ellos quieren) pero bueno sería una solución en mi punto de vista válida y no me metería en problemas de estar haciendo @media queries de cada mugroso pixel de la página - lol -