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を縮小する

答えて

関連する問題