0

ユーザーが画像をアップロードしてテンプレート画像の周りにドラッグして、目的の結果を得ることができるカスタマイズスクリプトを作成しています。問題は、テンプレート イメージの高さと幅が 1000px を超えているため、高さ/幅を制限するコンテナー内に配置することです。

アップロードされた画像がまったく同じようにスケーリングされるようにするにはどうすればよいので、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;
}
4

1 に答える 1

0

それがあなたが求めているものかどうかはよくわかりません…とにかく：

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/

于 2012-07-24T00:35:31.870 に答える