title: how to zoom without resize a background-image in reactjs
body: <p>I tried several things , like different components in order to achieve a sample project which zooms-in and zoom-out a background-image if you push the plus button or you scroll-up and last I've come up with the  following <a href="https://stackoverflow.com/questions/40114942/react-button-pressed-keep-calling-function">link</a> , any ideas how to make unchanged height and width?</p>
  
  <pre><code>constructor(props) {
      super(props)
      this.state = {
        zoom: 1,
      }
  
  
      this.t = undefined
      this.start = 100
      this.repeat = this.repeat.bind(this)
      this.onMouseDown = this.onMouseDown.bind(this)
      this.onMouseUp = this.onMouseUp.bind(this)
      this.zoom = this.zoom.bind(this)
      this.zoomOut = this.zoomOut.bind(this)
    }
    zoom(){
      this.setState({zoom: this.state.zoom + 0.012})
    }
    repeat() {
      this.zoom()
      this.t = setTimeout(this.repeat, this.start)
      this.start = this.start / 8
    }
  
    onMouseDown() {
      this.repeat()
    }
    onMouseUp() {
      clearTimeout(this.t)
      this.start = 100
    }
    zoomOut(){
      this.setState({
        zoom: 1
      })
    }
  
  
          {/* &lt;p className="App-intro"&gt; */}
  
          &lt;div className="Wrapper"&gt;
            &lt;div className="zoomControl"&gt; 
              &lt;div className="zoom" style={{transform: 'scale('+ this.state.zoom +')'}}&gt;&lt;/div&gt;
                &lt;button className="zoomIn" onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown} style={{marginTop:"550px"}}&gt;+&lt;/button&gt;
                &lt;button className="zoomOut" onClick={this.zoomOut}&gt;-&lt;/button&gt;
  </code></pre>
  
  <p>and css is </p>
  
  <pre><code>.zoom {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: absolute;
    /* transition: background-size 4s ease; */
  
    /* background: green; */
    background-image: url('./SampleJPGImage_50kbmb.jpg');
    /* background-repeat: none; */
    /* margin-top: 500px; */
  }
  
  .Wrapper{
    width:250px !important;
    height: 250px !important;
    display: inline-block;
    overflow: hidden;
  }
  </code></pre>