代码之家 › 专栏 › 技术社区 › Harper Creek

使用变量缩放图像

scale variables image html javascript

Harper Creek · 技术社区 · 7 年前

我试着用变量来缩放一幅图像,而不是用一组石头来缩放。我知道使用“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>

3 回复 | 直到 7 年前

Sebastian Simon SamB 7 年前

只需使用字符串连接( "scale(" + f + ", " + i + ")" )或字符串插值( `scale(${f}, ${i})` ).

Andrea 7 年前

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

Lasitha Petthawadu 7 年前

需要使用concat表示f和i的值

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>

推荐文章

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

McRui · Laravel storeAs()存储问题中的图像

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

GabyUnalaq · 从原始RGB深度图像到灰度的转换不正确

2 年前

AayushPokharel · 如何在css中处理图像的alpha层?

2 年前

MHSarmadi · 阻止显示未完全加载的图像

2 年前

softandwet · 反应img onError未点火

2 年前

Nilesh soni · 颤振图像已缩放,但如何更改缩放位置

2 年前

Adheed nihal · 如果在jquery中超过了文件限制,如何清除用户上传的图像

2 年前

imcoding · img src属性上的vuejs数据绑定出现404错误

2 年前