使用response的输入类型范围缩放图像

Question

我希望能用React的范围来改变图片的比例，但我不知道怎么做。

以下是我的html代码，包含图片和输入范围

我试着在输入上做一个onchange来改变我的图像宽度，但我没有做到......

这真是让人沮丧。

<div> 
<img id="image" className="carteImg" alt="Weiswampach Carte" src={map}/>
<input id="ranger" type="range" min="1" max="100" defaultValue="1"/>
</div>

Answer 1

const ScalingImage = () => {
  const [size, setSize] = useState(50);
  return (
    <div>
      <input
        id="ranger"
        type="range"
        min="1"
        max="100"
        value={size}
        onChange={e => {
          const { value } = e.target;
          setSize(parseInt(value, 10));
        }}
      />
      <div>
        <img
          id="image"
          className="carteImg"
          alt="Weiswampach Carte"
          src={img}
          style={{ width: `${size}%` }}
        />
      </div>
    </div>
  );
}

当然，它可以得到更复杂的取决于 如何 你想缩放图像，但这是基本前提。