how to zoom without resize a background-image in reactjs

Question

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 link , any ideas how to make unchanged height and width?

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


        {/* <p className="App-intro"> */}

        <div className="Wrapper">
          <div className="zoomControl"> 
            <div className="zoom" style={{transform: 'scale('+ this.state.zoom +')'}}></div>
              <button className="zoomIn" onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown} style={{marginTop:"550px"}}>+</button>
              <button className="zoomOut" onClick={this.zoomOut}>-</button>

and css is

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

score 2 · Answer 1 · answered Jun 15 '18 at 10:41

You can't really zoom in / zoom out your background-image but here's a simple trick how to achieve the same functionality using transform: scale(<value>) on div containing your image background: url(<url>);

class App extends React.Component {

  state = {
    scale: 1,
  }
  
  zoomIn = () => {
     this.setState({ scale: this.state.scale * 2 });
  }
  
  zoomOut = () => {
    this.setState({ scale: this.state.scale / 2 });
  }

  render() {
    return (
      <div className="container">
        <div
          className="bg-image-wrapper"
          style={{ 'transform': `scale(${this.state.scale})` }}
        />
        <div className="content">
          <button onClick={this.zoomIn}>Zoom in</button>
          <button onClick={this.zoomOut}>Zoom out</button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('react'));

.container {
  display: block;
  position: relative;
  margin: 10px;
  height: 300px;
  width: 600px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.bg-image-wrapper {
  position: absolute;
  background: url('http://ns328286.ip-37-187-113.eu/ew/wallpapers/800x480/12840_800x480.jpg');
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 0.4s;
  
}

.content {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="react"></div>

I tried this which you suggested me(with create-react-app), but the error i am taking is the following: TypeError: Cannot read property 'setState'' of undefined, what am i doing wrong? — Yannis_K, Jun 15 '18 at 11:18
@Yannis_K Hey man did you find a solution ? The error you are talking about is very common, please give me more detailed information. — inaumov17, Jun 17 '18 at 10:21

score 1 · Answer 2 · answered Jun 15 '18 at 10:48

.zoomdiv{
margin: 0 auto;
margin-top: 10%;
width: 320px;

}
img.zoom{
transition: transform .2s;
}
img.zoom:hover {
  transform: scale(3.5);
}

<div class="zoomdiv">
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
<img class="zoom" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="100" />
</div>

how to zoom without resize a background-image in reactjs

2 Answers2