Shrink img using javascript

Question

I'm trying to shrink an image based off of what I learned on the mobile app SoloLearn. Please help.

<!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>

score 1 · Accepted Answer · answered Mar 17 '17 at 01:27

Rather then using img.style just set the width and height values of the image.

<!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>

score 1 · Answer 2 · answered Mar 17 '17 at 01:29

The width and height styles aren't numbers, they need units as well, like px for pixels. So

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

The only time you can omit the units is when you're setting them to 0, since that's the same regardless of the units.

score 1 · Answer 3 · answered Mar 17 '17 at 01:30

If you'd like to use the style property you need to set the unit of the number you're talking about (ie. "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>

Shrink img using javascript

3 Answers3