jquery - 使用 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);
    }
});​