使用javascript缩小img

我想缩小基于我在移动应用程序SoloLearn上学到的图像。请帮忙。使用javascript缩小img

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="xyz.css"/> 
</head> 
<body> 
<img id="image" src="myImage.jpg"/> 
<button id="shrink">Shrink</button> 
<script> 

var x = document.getElementById('shrink'); 
var img = document.getElementById('image'); 
x.addEventListener("click", shrnk); 
function shrnk() { 
    img.style.width = 50; 
    img.syle.height = 25; 
}; 

</script> 
</body> 


</html>

来源

2017-03-17 Daniel Archuleta

而不是使用img.style只是设置图像的宽度和高度值。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="xyz.css" /> 
 
</head> 
 

 
<body> 
 
    <img id="image" src="http://www.placehold.it/150" /> 
 
    <button id="shrink">Shrink</button> 
 
    <script> 
 
    var x = document.getElementById('shrink'); 
 
    var img = document.getElementById('image'); 
 
    x.addEventListener("click", shrnk); 
 

 
    function shrnk() { 
 
     img.width = 50; 
 
     img.height = 25; 
 
    }; 
 
    </script> 
 
</body> 
 

 

 
</html>

来源

2017-03-17 01:27:53 matt

的width和height风格不是数字，他们需要的单位，以及像px像素。所以

function shrnk() { 
    img.style.width = '50px'; 
    img.style.height = '25px'; 
}

可以省略单位的唯一情况是，当你将它们设置为0，因为这是一样的，不管单位。

来源

2017-03-17 01:29:25 Barmar

如果您想使用样式属性，您需要设置您正在讨论的数字的单位（即“px”）。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="xyz.css" /> 
 
</head> 
 

 
<body> 
 
    <img id="image" src="http://lorempixel.com/200/200" /> 
 
    <button id="shrink">Shrink</button> 
 
    <script> 
 
    var x = document.getElementById('shrink'); 
 
    var img = document.getElementById('image'); 
 
    x.addEventListener("click", shrnk); 
 

 
    function shrnk() { 
 
     img.style.width = "50px"; 
 
     img.style.height = "25px"; 
 
    }; 
 
    </script> 
 
</body> 
 

 

 
</html>

来源

2017-03-17 01:30:21 haxxxton

使用javascript缩小img

回答

相关问题