如何使用jquery将图像调整到滑块

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<div id="image-container">
  <img src="path/to/image.jpg" id="image" alt="Image">
  <input type="range" id="slider" min="0" max="100" value="50">
</div>

$(document).ready(function() {
  // 获取图像和滑块元素
  var $image = $('#image');
  var $slider = $('#slider');
  
  // 监听滑块值变化事件
  $slider.on('input', function() {
    // 获取滑块的值
    var value = $(this).val();
    
    // 调整图像大小
    $image.css('width', value + '%');
  });
});