Search code examples
javascripthtmlimagevariablesscale

Scaling image using variables

Im trying to scale an image using variables rather than a set in stone scale. I know using "scale(0.5,0.5)" works but I want to do something like "scale(x,y)" so the scale factor changes depending on what variables x and y are, However when I try doing this, the image will no longer scale like it did when it had a set scale factor. How can I solve this? Thanks for any help. Here's an example of what I mean.

<!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>
Solution 
  • function myFunction() {
    document.getElementById("myImg").style.WebkitTransform = "scale(" + f + "," + i + ")";
}