使用動態幀調整圖片大小

我完全卡住了，需要幫助。我一直在試圖創建一個圖片框架工具（照片等）。用戶可以在其中指定照片的大小，然後選擇彩色紙板安裝和框架類型來繞過它。我的客戶選擇了我創建一個類似的東西的網站是這樣的：http://www.ezeframe.co.uk/picture-frames 使用動態幀調整圖片大小

你可以看到，用戶可以指定自己的圖片大小，邊框和底座，並且看到它正在形成在屏幕上。我從哪裏冒出來就是縮放。你可以在上面的例子中看到，如果有人改變了它們的安裝尺寸或者幀類型，它們就會改變，以便它們保持與圖片大小成比例。我一直在試圖讓我的系統也一樣，而且我失敗了！

我到目前爲止已經完成（無縮放）可以在客戶端上看到住在這裏的網站：www.vivarti.co.uk/bespoke-frames

我大部分使用CSS，jQuery的做到了和AJAX。

有沒有比使用jquery更好的方法來做這種事情，或者有人能幫我算出數學來使我的版本規模化嗎？我知道的命令很高，但我只希望有人能幫助我！

在此先感謝。

來源

2013-10-31 willothewisp

或使用CSS

<body style="max-width: 90%; max-height: 90%"> 
    <div id="div_container" style="background: #ff3300;max-width: 90%; max-height: 90%"> 
     <img id="imgid" src="picture.jpg" style="max-width: 90%; max-height: 90%"> 
    </div 
</body>

你也可以使用JavaScript來設置的最大/最小寬度

來源

2013-10-31 11:02:13

謝謝，但不幸的是我不我認爲在這種情況下工作。這些框架都是特定的寬度，用戶也可以指定特定的安裝寬度。 – willothewisp

任何人都可以幫忙嗎？請？ – willothewisp

在我的情況下，爲了更新圖像的大小，我只需要使用javascript： –

試試這個

<html> 
    <head> 
     <script> 
      function setHeight(value) { 
       getTag('div_container').style.height = value + 'px'; 
      } 

      function setWidth(value) { 
       getTag('div_container').style.width = value + 'px'; 
      } 

      function getTag(id) { 
       return document.getElementById(id); 
      } 
     </script> 
    </head> 
    <body> 
     <div> 
      <input type="text" value="200" onChange="setHeight(this.value);" 
       placeholder="height"> 
      <input type="text" value="200" onChange="setWidth(this.value);"   
       placeholder="width"> 
     </div> 
     <div id="div_container" style="background: #ff3300;width:200px; 
      height:200px;max-width: 90%; max-height: 90%"> 
      <img id="imgid" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-sticker-proof.png" 
       style="min-width: 5%; min-height: 5%; max-width: 90%; max-height: 90%; margin: 5%;"> 
     </div> 
    </body>

來源

2013-11-01 13:38:22

使用動態幀調整圖片大小

回答

相關問題