使用jQuery ui滑块按比例缩放图像

我正在尝试使用滑块按比例缩放图像。我有眼镜图像（<代码> CSS：宽度：150 px高度：自动<代码> >）我需要那个图像大小，UI幻灯片句柄在中间（范围75 px-300 px）。这是我得到的：

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

jQuery（“滑块”）.slider({
步骤：1，
最高：300，
幻灯片：功能（e、ui）{
var sliderValue=jQuery（“滑块”）。滑块（“值”）；
jQuery（“.over_image”）.width（sliderValue*1.5）；
jQuery（“.over_image”）。高度（sliderValue）；
}
})

我得到的是方形图像，有没有关于如何保存纵横比的建议？

两个建议：

不要改变高度

从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);
    }
});​