使用jquery调整图像大小，而不使用任何服务器端脚本

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

<div id="image-container">
  <img src="path/to/image.jpg" alt="Image">
</div>

#image-container {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

$(document).ready(function() {
  // 获取图像容器和图像元素
  var container = $('#image-container');
  var image = container.find('img');

  // 监听窗口大小变化事件
  $(window).resize(function() {
    // 获取容器和窗口的宽度和高度
    var containerWidth = container.width();
    var containerHeight = container.height();
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    // 计算图像的新宽度和高度
    var newWidth, newHeight;
    if (containerWidth / containerHeight > windowWidth / windowHeight) {
      newWidth = windowWidth;
      newHeight = containerHeight * (windowWidth / containerWidth);
    } else {
      newWidth = containerWidth * (windowHeight / containerHeight);
      newHeight = windowHeight;
    }

    // 设置图像的新宽度和高度
    image.css({
      width: newWidth,
      height: newHeight
    });
  });

  // 触发窗口大小变化事件，以初始化图像大小
  $(window).resize();
});