使用 javascript 缩小 img

Question

我正在尝试根据我在移动应用程序 SoloLearn 上学到的知识来缩小图像。请帮忙

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

Answer 1

而不是使用 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>

Answer 2

width 和 height 样式不是数字，它们也需要单位，例如 px 表示像素。所以

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

唯一可以省略单位的情况是将它们设置为 0，因为无论单位如何都是一样的。

Answer 3

如果您想使用属性样式，您需要设置您正在谈论的数字的单位（即 "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>

使用 javascript 缩小 img

Shrink img using javascript

html

javascript

image

shrink