使用 javascript 缩小 img答案

【问题标题】：Shrink img using javascript使用 javascript 缩小 img
【发布时间】：2017-08-08 10:12:48
【问题描述】：

我正在尝试根据我在移动应用 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>

【问题讨论】：

标签： javascript html image shrink

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：