JavaScript 如何实现图片的自动缩放并保持纵横比的功能？

var img = document.getElementById("myImage");

function resizeImage() {
  // 获取窗口宽度和高度
  var windowWidth = window.innerWidth;
  var windowHeight = window.innerHeight;
  
  // 获取图片原始宽度和高度
  var imgWidth = img.naturalWidth;
  var imgHeight = img.naturalHeight;
  
  // 计算缩放比例
  var scale = Math.min(windowWidth / imgWidth, windowHeight / imgHeight);
  
  // 设置图片宽度和高度
  img.style.width = imgWidth * scale + "px";
  img.style.height = imgHeight * scale + "px";
}

// 初始化时调用一次该函数，确保图片按照正确的初始大小显示
resizeImage();

// 监听窗口大小变化事件
window.addEventListener("resize", resizeImage);

window.addEventListener("load", function() {
  // 初始化时调用一次自动缩放函数
  resizeImage();
  
  // 监听窗口大小变化事件
  window.addEventListener("resize", resizeImage);
});

.image-container {
  width: 400px;
  height: 300px;
  overflow: hidden;  /* 设置溢出隐藏，防止图片超出容器大小 */
}

.image-container img {
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

@media (max-width: 768px) {
  .image-container {
    width: 100%;
    height: auto;
  }
}