将图像缩放到其中心

我最近发布了一个关于如何使用input type =“range”元素缩放图像的问题。我收到来自用户的出色答案：将图像缩放到其中心

<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); 
}

然而，这会将图像缩放到左上角，我需要一个缩放到其中心的图像。我如何实现这一目标？似乎无法得到它使用文本对齐：中心或任何东西...

在此先感谢！

来源

2013-03-26 NollProcent

这不适用于普通的''，我宁愿使用带背景的div – aNewStart847 2013-03-26 11:02:03

这个附加问题非常适合您的原始问题：[使用input type =“range”来缩放图像]（ http://stackoverflow.com/questions/15634036/using-input-type-range-to-scale-an-image） – CBroe 2013-03-26 11:02:32

用div和background替换了img标签，现在它不能缩放... – NollProcent 2013-03-26 11:20:21

是的。假设您的图像以全角开始，您只需要考虑图像中心，然后根据尺寸更改重新定位图像。

添加到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-26 11:25:01 OpherV

谢谢，这正是我需要的！不，我已将范围滑块的最小值更改为20 ;-) – NollProcent 2013-03-26 11:39:22

使用img标签的align选项。

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

来源

2013-03-26 11:06:31

The align元素是旧的，并在HTML 4.01及更新版本中被弃用。不再工作了。 – NollProcent 2013-03-26 11:16:27

是的，它不能在HTML 5 – 2013-03-27 19:02:56

将图像缩放到其中心

回答

相关问题