JS实现控制图片显示大小的方法【图片等比例缩放功能】

2023年5月28日上午9:25 • JavaScript

下面是JS实现控制图片显示大小的方法的完整攻略，包含以下步骤：

步骤 1：准备工作

在HTML文档中添加一个图片：

<img src="图片链接" alt="图片说明">

步骤 2：给图片添加ID

为图片添加一个ID，方便后续在JS中引用该图片：

<img id="pic" src="图片链接" alt="图片说明">

步骤 3：编写JS代码

接下来，我们要编写JS代码，实现图片等比例缩放的功能。具体步骤如下：

获取图片对象

在JS中，我们使用document.getElementById()函数获取图片对象，代码如下：

var pic = document.getElementById("pic");

计算缩放比例

接下来，我们需要计算图片缩放的比例。我们可以使用图片真实宽度和高度，以及图片容器（例如div）的宽度和高度，来计算图片需要缩放的比例。

var containerWidth = document.getElementById("container").offsetWidth; // 获取容器宽度
var containerHeight = document.getElementById("container").offsetHeight; // 获取容器高度
var picWidth = pic.naturalWidth; // 获取图片真实宽度
var picHeight = pic.naturalHeight; // 获取图片真实高度

if (picWidth > containerWidth || picHeight > containerHeight) {
  if ((picWidth / containerWidth) > (picHeight / containerHeight)) {
    var ratio = containerWidth / picWidth;
  } else {
    var ratio = containerHeight / picHeight;
  }
} else {
  var ratio = 1;
}

设置图片缩放

最后，我们使用CSS来设置图片的缩放，并将缩放比例应用到CSS样式中：

pic.style.width = picWidth * ratio + "px";
pic.style.height = picHeight * ratio + "px";

示例 1：等比例缩放图片

下面是一个完整的JS代码示例，实现等比例缩放图片的效果：

<html>
<head>
  <style>
    #container {
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
    }
    #pic {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="pic" src="图片链接" alt="图片说明">
  </div>
  <script>
    var pic = document.getElementById("pic");
    var containerWidth = document.getElementById("container").offsetWidth;
    var containerHeight = document.getElementById("container").offsetHeight;
    var picWidth = pic.naturalWidth;
    var picHeight = pic.naturalHeight;

    if (picWidth > containerWidth || picHeight > containerHeight) {
      if ((picWidth / containerWidth) > (picHeight / containerHeight)) {
        var ratio = containerWidth / picWidth;
      } else {
        var ratio = containerHeight / picHeight;
      }
    } else {
      var ratio = 1;
    }

    pic.style.width = picWidth * ratio + "px";
    pic.style.height = picHeight * ratio + "px";
  </script>
</body>
</html>

示例 2：点击按钮也可以缩放图片

下面是一个完整的JS代码示例，实现点击按钮也可以缩放图片的效果：

<html>
<head>
  <style>
    #container {
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
    }
    #pic {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <img id="pic" src="图片链接" alt="图片说明">
  </div>
  <button id="button">点击缩放</button>
  <script>
    var pic = document.getElementById("pic");
    var containerWidth = document.getElementById("container").offsetWidth;
    var containerHeight = document.getElementById("container").offsetHeight;
    var picWidth = pic.naturalWidth;
    var picHeight = pic.naturalHeight;

    function resizePic() {
      if (picWidth > containerWidth || picHeight > containerHeight) {
        if ((picWidth / containerWidth) > (picHeight / containerHeight)) {
          var ratio = containerWidth / picWidth;
        } else {
          var ratio = containerHeight / picHeight;
        }
      } else {
        var ratio = 1;
      }

      pic.style.width = picWidth * ratio + "px";
      pic.style.height = picHeight * ratio + "px";
    }

    resizePic(); // 初始执行一次

    document.getElementById("button").addEventListener("click", function() {
      // 随机修改图片宽和高，模拟图片的内容变化
      picWidth = Math.floor(Math.random() * 500) + 200;
      picHeight = Math.floor(Math.random() * 500) + 200;
      resizePic();
    });
  </script>
</body>
</html>

以上是JS实现控制图片显示大小的方法的完整攻略，希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现控制图片显示大小的方法【图片等比例缩放功能】 - Python技术站