html - 按比例缩放所有图像以适合容器

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;
}

Demo: http://jsfiddle.net/pu76s/3/