css 变换比例使图像截断

Question

我正在尝试将图像缩放为双倍点击放大按钮，

点击缩小按钮

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

我该怎么办？

同样的问题，CSS Transform scale scrolling issue ...但这不是一个好主意。
因为它在缩小时也会将焦点缩放到“左上角” 图像，所以中心对齐是不可能的
（我想应用 transform: scale(..) using transform-origin: center）

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

有什么想法吗？ :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>
    )
}

和css。

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

Answer 1

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

$("#zoom-in").on("click", function() {
  $(".image").removeClass("zoom-out");
  $(".image").addClass("zoom-in");
});

$("#zoom-out").on("click", function() {
  $(".image").removeClass("zoom-in");
  $(".image").addClass("zoom-out");
});

$("#zoom-off").on("click", function() {
  $(".image").removeClass("zoom-in");
  $(".image").removeClass("zoom-out");
});

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 4px solid;
}
.wrapper .image {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.4);
  border-radius: 50%;
  transform-origin: center;
  transition: transform ease .3s;
}
.wrapper .image.zoom-in {
  transform: scale(2);
}
.wrapper .image.zoom-out {
  transform: scale(0.5);
}

section {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 10px;
}
section button {
  width: 30px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="image"></div>
</div>

<section>  
  <button id="zoom-out">−</button>
  <button id="zoom-off">0</button>
  <button id="zoom-in">+</button>
</section>