使用jQuery-ui滑塊的比例縮放圖像

Question

我在嘗試按比例縮放使用滑塊的圖像。我有眼鏡圖像（in css: width: 150px height: auto）我需要那個圖像大小，ui滑動手柄在中間（範圍75px - 300px）。在這裏我得到了：

<script> 
       jQuery("#slider").slider({ 
        step: 1, 
        max: 300, 
        slide: function(e,ui){ 
         var sliderValue = jQuery("#slider").slider("value"); 
         jQuery(".over_image").width(sliderValue * 1.5); 
         jQuery(".over_image").height(sliderValue); 

        } 
       }) 
</script> 
     <div class="wraper"> 
      <div id="output" class="foto-frame"> 
     <img class="over_image" src="1.png" alt="img3" /> 
      </div> 
      <div id="progressbox"><div id="progressbar"></div ></div> 
      <div class="nav-buttons"> 
       <div id="slider"></div> 
      </div> 
     </div> 

即時通訊圖像，任何建議如何保存長寬比？

Answer 1

兩條建議：

不改變高度。

開始從75

var over_image = jQuery(".over_image"); 
jQuery("#slider").slider({ 
    step: 1, 
    max: 300 - 75, 
    slide: function(e, ui) { 
        var sliderValue = jQuery("#slider").slider("value"); 
        over_image.width(sliderValue + 75); 
    } 
});​