如何在 JavaScript 中将 px 转换为 %（100% 以内）

Question

我有一个小问题，我将非常感谢任何答案。

一般来说，我的代码中有图片的上传，还有改变它的高度的输入。

HTML 代码：

<p>Height</p>
            
<input type='range' min='1' max='100' step='1' value='30' class='range' />

这是刚刚上传图片时的 JS 代码：

const image = document.querySelector('.image')
range.value = image.height

改变高度的JS代码：

const range = document.querySelector('.range')

range.addEventListener('mousemove', () => {
  let x = range.value
  let color = 'linear-gradient(90deg, rgb(0,0,0)' + x + '%, rgb(159, 159, 159)' + x + '%)'
  range.style.background = color
  image.style.height = range.value + '%'
})

问题是addEventListener第一次工作的时候，取range.value，这个值就是图片的高度（比如121px），这个高度大于100，但是input的“max”属性是相等的到 100 (max="100)，所以输入值变为 100，图像也是。我的意思是，图像的高度现在是 100%，这不应该。

那么，我如何获取图像的高度（121px）并将其转换为百分比，但在 100% 以内，所以我可以第一次使用这个数字来设置输入的 value 属性？

Answer 1

您可以通过获取window.height 并找到它们之间的比率来计算相对值。如果你想找到一个真正的实现，请设置一个 jsfiddle，以便我可以处理它。

Answer 2

原来ma​​x属性应该和input的宽度一样，比如，如果input.clientWidth是200px，那么可以这样：input.max = input.clientWidth。它与问题无关，但对我的目的有用