將圖像縮放到其中心

我最近發佈了一個關於如何使用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

將圖像縮放到其中心

回答

相關問題