javascript - 使图像向其中心缩放

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 标签的 align 选项。

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