0

最近、input type="range"要素を使用して画像を拡大縮小する方法に関する質問を投稿しました。私はユーザーPrisonerから素晴らしい答えを受け取りました：

<input id="ranger" type="range" min="1" max="100" value="100" />
<hr />
<img id="image" src="http://google.com/images/logo.png" width="275" height="95" />

var ranger = document.getElementById('ranger'),
image =  document.getElementById('image'),
width = image.width,
height = image.height;

ranger.onchange = function(){
image.width = width * (ranger.value / 100);
image.height = height * (ranger.value / 100);
}

でも！これにより、画像が左上隅に向かって拡大縮小され、中央に向かって拡大縮小される画像が必要になります。どうすればこれを達成できますか？text-align：centerなどを使用して機能させることができないようです...

前もって感謝します！

4

2 に答える 2

1

はい。画像が全幅で始まると仮定すると、画像の中心を考慮に入れてから、サイズ変更時に画像を再配置する必要があります。

cssに追加： img{ position: relative; }

次のように関数を修正します。

ranger.onchange = function(){
image.width = width * (ranger.value / 100);
image.height = height * (ranger.value / 100);

image.style.left=(width/2-image.width/2+"px");
image.style.top=(height/2-image.height/2+"px");    
}

これが動作するjsFiddleです

ちなみに、画像を1pX1pxのサイズまで縮小できるようにするつもりでしたか？そのポイントは何ですか？

于 2013-03-26T11:25:01.753 に答える
0

imgタグの整列オプションを使用します。

 <img id="image" src="http://google.com/images/logo.png"  align="middle" width="275" height="95" />
于 2013-03-26T11:06:31.037 に答える