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