Javascript css变换比例生成截断图像

我试图在单击放大按钮时将图像缩放两倍，
在单击缩小按钮时将图像缩放半倍

我的问题是，当单击放大按钮时（因此，图像大小是原来的两倍）
如果它的大小超过容器，图像的左侧（或图像的顶部）将被切断

我该怎么办

同样的问题在这里。。。但这不是一个好主意。
因为缩小时，它也会将焦点缩放到“左上方” 图像，因此无法进行中心对齐
（我想使用变换原点：中心应用变换：缩放（..）

我知道的唯一方法是每次计算图像大小，并应用边距作为截止线，但这很难应用

有什么想法吗o

代码如下所示

constructor() {
    super()
    this._refs = { ratio: 100 }
  }


 getImageStyle() {
    return {
      transform: scale(calc(${this.state.ratio} / 100)),
      'transform-origin': 'center'
    }
  }

  zoomIn() {
    this.setState({ ratio: this.state.ratio + 25 })
  }

   zoomIn() {
    this.setState({ ratio: this.state.ratio - 25 })
  }

render() {
    const { src } = this.props
    return (
      <div
        className={styles.wrapper}
        <img
          style={this.getImageStyle()}
          ref={(elem) => setRefToNode(this._refs, 'image', elem)}
          className={styles.image}
          src={src} />
      </div>
    )
}

---

不明白问题出在哪里。
变换时图像不会被切断

$（“#放大”）。打开（“单击”，函数（）{
$（“.image”）.removeClass（“缩小”）；
$（“.image”）.addClass（“放大”）；
});
$（“#缩小”）。在（“单击”，函数（）上{
$（“.image”）.removeClass（“放大”）；
$（“.image”）.addClass（“缩小”）；
});
$（“#缩小”）。打开（“单击”，函数（）{
$（“.image”）.removeClass（“放大”）；
$（“.image”）.removeClass（“缩小”）；
});
正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}
.包装纸{
显示器：flex；
对齐项目：居中；
证明内容：中心；
宽度：100px；
高度：100px；
边框：4px实心；
}
.wrapper.image{
位置：相对位置；
宽度：100%；
身高：100%；
背景色：rgba（255,0,0,0.4）；
边界半径：50%；
变换原点：中心；
转变：转变容易；
}
.wrapper.image.zoom-in{
变换：尺度（2）；
}
.wrapper.image.zoom-out{
变换：比例（0.5）；
}
部分{
位置：固定；
底部：0；
左：0；
利润率：10px；
}
区段按钮{
宽度：30px；
高度：30px；
利润率：10px；
字体大小：粗体；
字体大小：20px；
}

−
0
+
寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。看见
.wrapper {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: scroll;

  .image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    background-color: white;
  }
}