변수를 사용하여 이미지 크기 조절

돌로 된 세트가 아닌 변수를 사용하여 이미지의 크기를 조정하려고합니다. 나는 "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

당신은 F의 값 CONCAT 사용해야하고 난

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

변수를 사용하여 이미지 크기 조절

답변

관련 문제