时间戳

首页 > 解决方案 > 使用带有反应的输入类型范围缩放图像

reactjs - 使用带有反应的输入类型范围缩放图像

问题描述

我希望我可以使用 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>

标签： reactjsimageinputrangescale

解决方案

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

当然，根据您要如何缩放图像，它可能会变得更加复杂，但这是基本前提。

推荐阅读