2012-11-09 51 views
0

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

<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> 

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

回答

2

兩條建議:

不改變高度。

開始從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); 
    } 
});​