Escale todas las imágenes para que se ajusten proporcionalmente al contenedor

Estoy construyendo un script de personalización donde un usuario puede cargar una imagen y arrastrarla alrededor de una imagen de plantilla para obtener un resultado deseado. El problema es que la imagen de la plantilla mide más de 1000px de alto y ancho, así que la coloqué dentro de un contenedor que limita su altura / ancho.

¿Cómo lo hago para que la imagen cargada se escale exactamente igual, así que cuando creo la imagen a través de PHP puedo tomar los valores de CSS left: y top: y aplicarlos a la imagen de la plantilla y a la imagen cargadas mucho más grandes?

CSS actual:

 #template { position: relative; padding: 0; width: 500px; height: 500px; z-index: 1; } #uploaded { position: absolute; top: 0; left: 0; z-index: 2; } 

No estoy seguro si eso es lo que estás pidiendo … de todos modos:

El background-size: 100% propiedad CSS3 background-size: 100% permite especificar que la imagen de fondo debe completar el tamaño del contenedor y estirar proporcionalmente. Junto con background-repeat: no-repeat , podría ser lo que estás buscando:

 #uploaded { height: 500px; width: 500px; background-image: url(...); background-size: 100%; background-repeat: no-repeat; } 

Demostración: http://jsfiddle.net/pu76s/3/