Question

我尝试了几个东西，比如不同的组件，以便实现一个示例项目，如果你按下加号按钮或向上滚动，最后我想出了放大和缩小背景图像关注link，如何改变高度和宽度？

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>

和css是

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

Answer 1

你无法真正放大/缩小你的背景图像，但这里有一个简单的技巧如何使用包含你的图像transform: scale(<value>)的{{1}}上的div来实现相同的功能; < / p>

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

Answer 2

＆＃13;

.zoomdiv{
margin: 0 auto;
margin-top: 10%;
width: 320px;

}
img.zoom{
transition: transform .2s;
}
img.zoom:hover {
  transform: scale(3.5);
}

＆＃13;

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

＆＃13;

如何在不调整reactjs中的背景图像大小的情况下进行缩放

2 个答案: