按比例缩放所有图像以适应容器

Question

我正在构建一个自定义脚本，用户可以在其中上载图像并将其拖到模板图像周围以获得所需结果。问题是模板图像高度超过1000像素，因此我将它放在限制高度/宽度的容器内。

我该如何做到这样上传的图像缩放完全相同，所以当我通过PHP创建图像时，我可以将left:和top: CSS值应用到更大的模板图像和上传的图像上？

当前CSS：

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

Answer 1

我不太清楚，如果这是你问了...反正：

的CSS3属性background-size: 100%允许您指定的背景图像，应填写容器的大小和比例拉伸。加上background-repeat: no-repeat它可能是你在找什么：

#uploaded { 
    height: 500px; 
    width: 500px; 

    background-image: url(...); 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

演示：http://jsfiddle.net/pu76s/3/