如何在javascript和html中使用范围滑块更改图像大小？

问题是我在所选选项中有所有由id显示的衍射图像
从所选选项中选择图像， 我想更改范围滑块选择的任何图像的大小
有人能帮忙吗

var ranger=document.getElementById（'ranger'）；
var image1=document.getElementById（'image1'）；
var宽度=图像1.0宽度；
var高度=图像1.5倍高度；
ranger.onchange=函数（）{
图像1.width=宽度*（ranger.value/1）；
image1.height=高度*（ranger.value/1）；
}

0-0
0-1
0-2
0-3
0-4
0-5

我认为您应该使用in.attr（）更改高度和宽度

Html:

   <img id="image" src="image.jpg" width="100 " height="200 "  >
      <div class="slidecontainer">
      <input id="ranger" type="range" min="1" max="5" value="1" step="1" class="slider" style="width: 500px"  >

HTML:

---

注意（在这种情况下），您不需要设置

宽度

和

高度

-更改其中一个将自动更新另一个；）

您需要隔离问题并从中进行调试。如果你陷入困境，请清楚地解释什么东西不适合你。我建议你读书。还有，确保现在好点了吗？！在不改变代码高度和宽度的情况下，您编写的代码只适用于一个图像，但我的观点是，我有很多图像，我希望在所选选项中为所有图像提供相同的功能

var width = $("#image").attr("width");
var height = $("#image").attr("height");
$("#ranger").change( function() {
  $("#image").attr("width",width * (ranger.value / 1))
  $("#image").attr("height",height * (ranger.value / 1) )
});

<select id="mySelect" onchange="setImage();">
  <option value="0-0.jpeg">0-0</option>
  <option value="0-1.jpeg">0-1</option>
  <option value="0-2.jpeg">0-2</option>
  <option value="0-3.jpeg">0-3</option>
  <option value="0-4.jpeg">0-4</option>
  <option value="0-5.jpeg">0-5</option>
</select>

<input id="mySlider" type="range" min="1" max="5" value="1" step="1" onchange="resizeImage();" style="width:500px;">

<div id="img-wrapper" style="width:200px; height:200px;">
  <img src="0-0.jpeg" alt="My Image!" id="myImage" style="width:100%; height:1005;" />
</div>

function setImage() {
  var e = document.getElementById('mySelect');
  document.getElementById('myImage').src = e.options[e.selectedIndex].value;
}

function resizeImage() {
  var image = document.getElementById('img-wrapper'),
      ranger = document.getElementById('mySlider');
  image.style.width = 200*(mySlider.value / 1)+'px';
}