根据所选背景调整图像大小

Question

我在开发像这样的Pedalboard刨床时正在学习React：http://pedalboardplanner.com/，但是Im在如何根据所选的背景踏板实现图像尺寸调整方面迷失了。

例如，当我的踏板小时，橙色踏板看起来很大。

但是当我选择更大的踏板时，踏板会变小。

我打算以英寸为单位注册所有踏板和踏板，然后将图像调整为真实尺寸，但我真的不知道从哪里开始。

这就是我目前所拥有的

我在组件中使用的一些代码根据选择的内容来显示踏板

import React from 'react';
//useDispatch is for doing the actions and useSelector to read the state
import {useSelector} from 'react-redux'


function SearchPedal() {

  const actPedalboard = useSelector(store => store.pedalboard.PBImage)
  console.log(actPedalboard)

  const styles = {
    pbContainer: {
        width: "100%",
        height: "1000px",
        backgroundSize: "100%",
        backgroundImage: `url(${actPedalboard})`,
        backgroundRepeat:"no-repeat"
    }
  };

  return (
    <div style={styles.pbContainer}>
      
    </div>
  ); 

}

export default SearchPedal;

我不知道这是否可以仅使用CSS或通过实现某种JS脚本来完成