使用變量縮放圖像

我試圖使用變量而不是一組石垢中的變量來縮放圖像。我知道使用「scale（0.5,0.5）」的作品，但我想要做一些像「scale（x，y）」一樣的縮放因子，這取決於x和y是什麼變量。然而，當我嘗試這樣做時，圖像將不再像當它具有一套比例因子時那樣進行縮放。我該如何解決這個問題？謝謝你的幫助。這是我的意思的一個例子。使用變量縮放圖像

<!DOCTYPE html> 
<html> 
<body> 

<img id="myImg" src="img_pulpit.jpg"> 

<button onclick="myFunction()">Try it</button> 

<script> 
var a = document.getElementById("myImg"); 
var d = 5 
var e = 10 
var f = d/e 
var g = 10 
var h = 30 
var i = g/h 

function myFunction() { 
document.getElementById("myImg").style.WebkitTransform = "scale(f, i)"; 
} 

</script> 
</body> 
</html>

來源

2017-10-15 Harper Creek

如果它是一個形象......你爲什麼不只是使用背景 - 圖像和背景大小？如果它不只是一個圖像，會理解縮放比例。 –

function myFunction() { 
    document.getElementById("myImg").style.WebkitTransform = "scale(" + f + "," + i + ")"; 
}

來源

2017-10-15 16:44:03 Andrea

請擴展並解釋代碼片段 – DiskJunky

@DiskJunky他必須在字符串中連接「f」和「i」的當前值，而不是「f」和「i」字符 – Andrea

只要使用字符串連接（"scale(" + f + ", " + i + ")"）或字符串插值（`scale(${f}, ${i})`）。

來源

2017-10-15 16:43:42 Xufox

您需要CONCAT f的值使用，我

document.getElementById("myImg").style.WebkitTransform = "scale("+f+","+i+")";

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<img id="myImg" src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300"> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
var a = document.getElementById("myImg"); 
 
var d = 5 
 
var e = 10 
 
var f = d/e 
 
var g = 10 
 
var h = 30 
 
var i = g/h 
 

 
function myFunction() { 
 
document.getElementById("myImg").style.WebkitTransform = "scale("+f+","+i+")"; 
 
} 
 

 
</script> 
 
</body> 
 
</html>

來源

2017-10-15 16:47:21

使用變量縮放圖像

回答

相關問題