使用带有 react 的输入类型范围缩放图像

Question

我希望我能用 React 改变我图像的比例，但我不知道该怎么做。

这是我带有图像和输入范围的 html 代码

我试图对输入进行更改以更改我的图像宽度，但我没有成功......

这令人沮丧。

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

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