0

スライダーを使用して画像を比例的にスケーリングしようとしています。メガネの画像があります ( 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>

正方形の画像を取得しています。アスペクト比を保存する方法についてアドバイスはありますか?

4

1 に答える 1

2

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);
    }
});​
于 2012-11-09T22:04:52.270 に答える