javascript - 如何使用 javascript 和 html 中的范围 slider 更改图像大小？

Question

问题是我有不同的图像，所有图像都由所选选项中的 id 显示
来自所选选项的图像，我想更改范围 slider 选择的任何图像的大小
有人可以帮忙吗？

var ranger = document.getElementById('ranger');
var image1 =  document.getElementById('image1');
var width = image1.width;
var height = image1.height;

ranger.onchange = function(){
    image1.width = width * (ranger.value / 1);
    image1.height = height * (ranger.value / 1);
}

<div class="custom-select"    >
  <select onchange="$('#image1').attr('src', this.options[this.selectedIndex].value);" id="select">
    <option value=''>  </option>
    <option value='0-0.png'>0-0</option>
    <option value='0-1.png'>0-1</option>
    <option value='0-2.png'>0-2</option>
    <option value='0-3.png'>0-3</option>
    <option value='0-4.png'>0-4</option>
    <option value='0-5.png'>0-5</option>
  
    



  </select>
</div>
<img id="image1" width="100 " height="200 "  >

<div class="slidecontainer">
  <input id="ranger" type="range" min="1" max="5" value="0" step="1" class="slider" style="width: 500px"  >
</div>

Answer 1

HTML:

<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>

Javascript:

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';
}

请注意(在这种情况下)，您不需要设置 width 和 height - 更改其中一个会自动更新另一个； )