按比例縮放所有圖像以適應容器

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/