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/

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

1 个答案: