jquery调整图片宽度和高度

jQuery 是一个非常流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作，在网页设计中，我们经常需要使用 jQuery 来调整图片的宽度和高度，以适应不同的屏幕尺寸和布局需求，本文将详细介绍如何使用 jQuery 来调整图片的尺寸。

确保在你的 HTML 页面中引入了 jQuery 库，你可以从 jQuery 官方网站下载库文件，或者使用 CDN 链接直接引入。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们需要为图片添加一个类名或者 ID，以便我们能够在 jQuery 中引用它们，我们可以给所有需要调整尺寸的图片添加一个名为 "resize-image" 的类：

<img src="image.jpg" class="resize-image" width="100%" height="auto">

现在，我们可以使用 jQuery 来编写一个函数，该函数将根据页面的宽度来调整图片的尺寸，以下是一个简单的示例，它将在页面加载时调整所有具有 "resize-image" 类的图片的宽度和高度：

$(document).ready(function() {
  function adjustImageSize() {
    // 获取浏览器窗口的宽度
    var windowWidth = $(window).width();
    // 设置图片的最大宽度和高度
    var maxWidth = 600; // 你可以根据需要调整这个值
    var maxHeight = 400; // 你可以根据需要调整这个值
    // 遍历所有具有 "resize-image" 类的图片
    $('.resize-image').each(function() {
      // 获取图片当前的宽度和高度
      var currentWidth = $(this).width();
      var currentHeight = $(this).height();
      // 计算新的宽度和高度
      var newWidth = Math.min(maxWidth, currentWidth);
      var newHeight = (newWidth / currentWidth) * currentHeight;
      // 如果新高度超过了最大高度，也需要调整
      if (newHeight > maxHeight) {
        newHeight = maxHeight;
        newWidth = (newHeight / currentHeight) * currentWidth;
      }
      // 设置图片的新尺寸
      $(this).css({
        'width': newWidth + 'px',
        'height': newHeight + 'px'
      });
    });
  }
  // 在页面加载时调用 adjustImageSize 函数
  adjustImageSize();
  // 当窗口大小改变时，再次调用 adjustImageSize 函数以适应新的尺寸
  $(window).resize(function() {
    adjustImageSize();
  });
});

在这个示例中，我们首先定义了一个名为 adjustImageSize 的函数，它会计算并设置图片的新宽度和高度，我们使用了 $(window).width() 来获取当前窗口的宽度，并根据这个宽度来限制图片的最大尺寸，我们还使用了 Math.min 函数来确保图片的尺寸不会超过我们设定的最大值。

我们还为 .resize-image 类的图片添加了一个 each 循环，这样我们可以遍历所有这些图片并分别调整它们的尺寸，在循环中，我们使用了 $(this).css() 方法来设置图片的宽度和高度。

我们在文档加载完成后调用了 adjustImageSize 函数，并在窗口大小改变时绑定了一个 resize 事件，以便在窗口尺寸变化时自动调整图片尺寸。

通过这种方式，我们可以使用 jQuery 轻松地调整图片的宽度和高度，使其适应不同的屏幕尺寸和布局需求，这不仅可以提高网页的响应式设计，还可以改善用户体验。