当窗口大小改变时，如何调整IMG元素的大小，使其成比例地位于窗口的相同位置？

当窗口大小改变时，可以通过以下步骤调整IMG元素的大小，使其成比例地位于窗口的相同位置：

使用CSS的max-width和max-height属性来限制IMG元素的最大宽度和最大高度，以确保它不会超出窗口的大小。
使用CSS的width和height属性来设置IMG元素的初始宽度和高度，可以使用百分比或像素值。
使用CSS的object-fit属性来控制IMG元素在其容器中的适应方式。常用的取值有：
- contain：保持原始比例，缩放图片以适应容器，可能会留有空白区域。
- cover：保持原始比例，缩放图片以填充容器，可能会裁剪部分图片。
- fill：拉伸图片以填充容器，可能导致图片变形。
- none：保持原始大小，不进行任何缩放或裁剪。

使用JavaScript监听窗口大小改变的事件，例如resize事件。
在事件处理函数中，根据窗口的新大小计算IMG元素的新宽度和高度，并更新它们的值。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .image-container img {
      max-width: 100%;
      max-height: 100%;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="your-image.jpg" alt="Your Image">
  </div>

  <script>
    window.addEventListener('resize', function() {
      var imageContainer = document.querySelector('.image-container');
      var img = imageContainer.querySelector('img');
      var containerWidth = imageContainer.offsetWidth;
      var containerHeight = imageContainer.offsetHeight;
      var imgAspectRatio = img.naturalWidth / img.naturalHeight;
      var containerAspectRatio = containerWidth / containerHeight;

      if (containerAspectRatio > imgAspectRatio) {
        img.style.width = '100%';
        img.style.height = 'auto';
      } else {
        img.style.width = 'auto';
        img.style.height = '100%';
      }
    });
  </script>
</body>
</html>

这段代码中，我们创建了一个包含IMG元素的容器div，并使用CSS设置容器的宽度和高度为100%。IMG元素的宽度和高度使用CSS设置为100%，并使用object-fit: contain来保持原始比例，缩放图片以适应容器。

在JavaScript部分，我们使用window.addEventListener来监听窗口大小改变的事件。在事件处理函数中，我们获取容器的宽度和高度，以及IMG元素的原始宽度和高度。然后，根据窗口和图片的宽高比，计算出IMG元素的新宽度和高度，并更新它们的值。

这样，无论窗口大小如何改变，IMG元素都会成比例地位于窗口的相同位置。