Question

我最近发布了一个关于如何使用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或任何东西......

提前致谢！

Answer 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大小？有什么意义呢？

Answer 2

使用img标签的对齐选项。

 <img id="image" src="http://google.com/images/logo.png"  align="middle" width="275" height="95" />

使图像向中心缩放

2 个答案: